Author: Тиге Дж.К.
Tags: взаимодействие сетей межсетевой обмен компьютерные технологии программирование информатика
ISBN: 5-477-00031-7
Year: 2005
Text
QUICK START
Джейсон Кренфорд Тиге
DHTML И CSS
ДЛЯ INTERNET
3-е издание,
исправленное и дополненное
VISUAL QUICKSTART GUIDE__
DATAllANDOS
FOR THE WORLD WIDE WEB
3'd EDITION
Jason Cranford Teague
<Q) Peachpit Press
QUICK START
NITfflt И ffl
ДЛЯ INTERNET
3-е издание, исправленное и дополненное
Джейсон Кренфорд Тиге
NT Press
Москва, 2005
УДК 004.738.5
ББК 32.973.26-018.2
Т39
Подписано в печать 19.1 1.2004. Формат 70xl00l/h). Гарнитура «Миниатюра*. Печать
офсетая Уел печ. л. 42.25. Тираж 3 000 экз. Заказ № 601 1
Тиге Дж. К.
Т39 DHTML и CSS для Internet / Джейсон Кренфорд Тиге ; Пер. с англ. А. И. Осипова. -
3-е изд., испр. и доп. - М.: НТ Пресс, 2005. - 520 с.: ил. - (Quick Start).
ISBN 5-477-00031-7
В книге описывается использование современных Web-технологий - динамичес-
кого HTML (DHTML) и каскадных таблиц стилей (CSS), используемых в Web-
программировании для создания интерактивных динамических Web-узлов.
С помощью этой книги вы научитесь создавать динамические Web-страницы,
включающие интерактивные элементы, различные текстовые, графические и
анимационные эффекты.
Изложение материала сопровождается наглядными примерами, даются советы
по планированию и созданию Web-сайтов.
Книга адресована Web-программистам и Web-дизайнерам, а также всем, кто ин-
тересуется языком DHTML и прикладными Web-технологиями.
УДК 004.738.5
ББК 32.973.26-018.2
Authorized translation from the English language edition, entitled DHTML AND CSS FOR THE WORLD
WIDE WEB: VISUAL QUICKSTART GUIDE, 3rd Edition, ISBN 0321199588, by TEAGUE, JASON
CRANFORD, published by Pearson Education, Inc, publishing as Peachpit Press, Copyright © 2004.
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 languarge edition published by NT PUBLISHING
HOUSE, Copyright © 2005.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было
форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но, поскольку вероятность техни-
ческих ошибок все равно существует, издательство не может гарантировать абсолютную точность и
правильность приводимых сведений. В связи с этим издательство не несет ответственности за воз-
можные ошибки, связанные с использованием книги.
ISBN 0-321-19958-8 (англ.)
ISBN 5-477-00031-7 (рус.)
Copyright © Peachpit Press, 2004
© Перевод на русский язык, оформление
НТ Пресс, 2005
Посвящается Джоселин и Дэшиель,
которые делают мою жизнь такой насыщенной!
Благодарности
Таре (Тага), моей супруге и лучшему критику. Нэнси (Nancy), которая вела проект
от начала и до конца, проявив незаурядное терпение. Кэйт (Kate), убедившейся в том,
что все, что я делал, имело смысл. Томасу (Thomas), проверившему кодировку для всех
доступных браузеров. Молли (Molly), обновившей главы 19 и 20. Маме, папе и Нэнси
(Nancy), которые сделали меня таким, каким я есть. Дяде Джонни (Johnny) за огромную
поддержку. Пэту (Pat) и Рэду (Red), моим самым верным поклонникам. Нейлу (Neil) и
всем замечательным сотрудникам Studio В за то, что они представляли мои интересы.
Чарльзу Доджсону (Charles Dodgson), более известному как Льюис Кэролл (Lewis Caroil),
за то, что он написал «Алису в стране Чудес», и Джону Тенниелу (John Tenniel) - за вели-
колепные иллюстрации к этой книге. Джуди (Judy), Бойд (Boyd), Dr. G и всем учителям,
которым небезразлично то, что они делают. Так держать! Дугласу Адамсу (Douglas
Adams), Нейлу Гайману (Neil Gaiman) и Карлу Сагану (Carl Sagan) за их произведения,
которые ежедневно вдохновляют меня, а также The Cure, the The и другим за то, что они
не дали мне сойти с ума, пока я работал над данной книгой.
(ШРШАШ
Введение .......................................................... в
Часть I. Каскадные таблицы стилей..................................23
Глава 1. Введение в CSS........................................24
Определение стиля...................................25
Каскадные таблицы стилей............................26
Версии CSS..........................................29
Типы правил CSS.....................................31
Составляющие CSS-правил.............................32
CSS и языки разметки................................35
Настройка DTD.......................................41
Типы HTML-тегов.....................................43
Глава 2. Основы CSS............................................47
Добавление стилей в HTML-тег........................48
Добавление стилей на Web-страницу...................50
Добавление стилей на Web-сайт.......................53
Переопределение HTML-тега...........................60
Определение классов для создания тегов..............62
Определение ID для идентификации объекта............65
Определение стилей с одинаковыми правилами........ 68
Определение стилей в контексте......................70
Определение ссылок стилей с псевдоклассами..........73
Создание буквиц с псевдоэлементами..................77
Значение 'important.................................80
Наследование родительских свойств...................82
Управление существующими
или наследованными значениями свойств...............84
| 8 | DHTML и CSS для Internet
Определение каскадного порядка........................86
Настройка стилей для печати...........................88
Комментарии в CSS.....................................91
Стратегия создания таблиц стилей......................92
Глава 3. Управление шрифтом.....................................94
Оформление в Web......................................95
Способы представления текста в Web....................96
Установка шрифта......................................97
Шрифты в браузере.....................................99
Размер шрифта........................................102
Курсив.............................................. 104
Толщина шрифта.......................................106
Создание Small caps..................................108
Определение нескольких значений шрифта одновременно..109
Глава 4. Управление текстом....................................112
Кернинг...............................................ИЗ
Интервал между словами...............................115
Изменение отступа между строками текста..............116
Заглавные и строчные буквы...........................118
Выравнивание текста по горизонтали...................119
Вертикальное выравнивание текста.....................121
Выделение абзацев в тексте...........................123
Настройка цвета текста и фона........................126
Украшение текста.....................................128
Настройка направления текста.........................130
Установка разрыва страницы для печати................132
Глава 5. Управление элементом..................................134
Что такое элемент....................................135
Изменение внешнего вида элемента.....................137
Ширина и высота элемента.............................142
Поле элемента........................................146
Рамка элемента.......................................149
Внутренний отступ...... 157
Настройка фона.......................................159
Глава 6. Управление позиционированием..........................16?
Что такое окно и документ...........................168
Тип позиционирования... 170
Настройка положения элемента........................174
Определение положения
по отношению к правому нижнему углу..................176
Элементы в порядке стека (ЗО-позиционирование).......179
Содержание | 9 |
Свободное положение элементов в окне...............181
Отмена свободного положения........................183
Управление свойствами пробелов.....................185
Глава 7. Управление видимостью элемента is?
Определение видимости элемента.....................187
Определение видимой части элемента.................190
Управление невидимой частью........................192
Настройка прозрачности элемента....................194
Глава 8. Управление списком,
таблицей и интерфейсом.......................................196
Списки............................................ 197
Виды маркеров......................................199
Создание собственных маркеров......................200
Создание висячих отступов..........................202
Свертывание границ между ячейками таблицы..........203
Настройка положения таблицы........................205
Изменение внешнего вида курсора мыши...............206
Изменение внешнего вида полосы прокрутки
(только Internet Explorer для Windows).............209
Часть II. Динамический HTML.....................................211
Глава 9. Назначение DHTML.......................................212
Динамический HTML..................................213
История DHTML......................................216
Причины использования DHTML........................218
Flash и DHTML......................................219
Проблема выбора....................................222
Глава 10. Объектная модель
документа и события..........................................224
DOM - путеводитель по Web-странице.................225
Создание объекта...................................229
Обработчики событий................................230
Триггеры событий...................................233
Функционирование DOM...............................235
Передача событий функции...........................238
Привязка событий к объектам........................240
Определение возможностей браузера..................242
Построение общей DOM...............................244
| 10 | DHTML и CSS для Internet
Глава 11. Среда, в которой вы работаете......................246
Тип операционной системы...........................246
Название и версия браузера.........................249
Адрес и название страницы..........................252
Размеры экрана.....................................253
Количество цветов..................................256
Размеры окна браузера..............................258
Размеры клиентской области окна....................260
Положение прокрутки страницы.......................262
Глава 12. Информация об объекте..............................264
Как определить, по какому объекту щелкнул пользователь.265
Размеры объекта....................................267
Определение положения объекта......................269
Поиск трехмерного положения объекта................274
Состояние видимости объекта........................276
Видимая область объекта............................278
Глава 13. Информация о событии...............................282
Какое событие произошло............................282
Какая клавиша была нажата..........................285
Какая клавиша-модификатор была нажата..............287
Какая кнопка мыши была нажата......................289
Где был выполнен щелчок мыши.......................291
Глава 14. Основы динамических технологий ....................294
Отображение и сокрытие объектов....................294
Изменение стиля отображения........................297
Перемещение объектов...............................300
Перемещение объекта на заданное расстояние.........302
Перемещение объектов в 3D..........................304
Видимая область объекта.... 307
Изменение содержимого объекта......................309
Управление объектами между фреймами................311
Глава 15. Развитые динамические технологии....................зы
Повторный запуск функции...........................314
Анимационные объекты...............................318
Как сделать объект доступным для перемещения.......323
Новое окно браузера................................326
Позиционирование окна браузера.....................330
Изменение размеров окна.... 332
Прокрутка окна браузера.... 335
Содержание | 11 |
Глава 16. Динамические технологии CSS........................зз?
Настройка стилей для операционной системы
или браузера........................................338
Определение значения собственности для стиля........343
Добавление или изменение определения стиля..........345
Изменение CSS-класса объекта........................349
Отключение или включение таблицы стилей.............351
Часть III. Использование инструментов
для создания DHTML и CSS............................ззз
Глава 17. Дизайн и содержание................................354
Импорт внешнего содержимого.........................354
. Добавление динамического содержания................360
Создание дизайна, состоящего из нескольких столбцов.363
Таблицы стилей......................................366
Формы стилей........................................368
Фреймы стилей.......................................372
Создание цитаты.....................................374
Создание заголовков.................................376
Фиксированный заголовок.............................378
Простая тень........................................380
Глава 18. Навигация и управление.............................звг
Определение различных стилей ссылок.................383
Определение переключающихся изображений в CSS.......385
Всплывающий гипертекст..............................388
Выпадающее меню.....................................391
Сворачивающиеся меню................................397
Выдвижное меню......................................400
Панель управления сайтом............................404
Панели прокрутки для слоя...........................408
Ввод из поля формы..................................414
Отслеживание указателя мыши.........................416
Организация слайд-шоу...............................419
Глава 19. Знакомство с GoLive................................423
Интерфейс GoLive....................................424
Внедрение CSS в Web-страницу........................428
Создание слоя.......................................434
Создание DHTML-анимации.............................436
| 12 | DHTML и CSS для Internet
Глава 20. Dreamweaver MX 2004 Primer...................43s
Интерфейс Dreamweaver........................439
Внедрение CSS................................442
Создание дополнительного слоя................447
Работа с CSS-шаблонами в Dreamweaver.........449
Глава 21. Отладка кода.................................453
Обнаружение ошибок CSS.......................454
Проверка CSS-правила.........................456
Определение ошибок в коде JavaScript.........458
Различия между браузерами....................463
Приложения................................................465
Приложение А. Краткая справка о CSS....................466
Приложение В. Краткая справка о DHTML..................476
Приложение С. Браузеры,
поддерживающие DHTML и CSS...........4вз
Приложение D. Шрифты,
поддерживаемые браузером...............................492
Приложение Е. Символы клавиатуры.....................497
Приложение F. Инструменты и ресурсы..................500
Предметный указатель......................................515
Щ1Ш
Раньше создание Web-страниц было не-
сложным делом. Вы написали несколько те-
гов, вставили несколько картинок - и стра-
ница готова. Теперь, с появлением потоко-
вого видео, JavaScript, CGI, Shockwave, Flash
и Java создание Web-страниц может пока-
заться трудной задачей для любого, кто не
хочет стать программистом.
Динамический HTML (Dynamic HTML -
DHTML) и каскадные таблицы стилей
(Cascading Style Sheets - CSS) - технологии,
позволяющие Web-дизайнеру добавлять но-
вые элементы на страницу так же легко и
быстро, как при помощи старого доброго
HTML. При использовании DHTML не нуж-
но задумываться о том, что у посетителя
могут отсутствовать какие-либо дополни-
тельные модули (Plugin), или полагаться на
сложные языки программирования (за ис-
ключением, быть может, JavaScript). В боль-
шей своей части DHTML похож на HTML и
не требует специального программного
обеспечения.
Итак, данная книга научит вас создавать
привлекательные по дизайну и интерак-
тивные Web-страницы, не прикладывая
для этого больших усилий. Вы получите
полезные базовые навыки, которые помо-
гут вам освоить Web-дизайн.
Если вы изучаете Web-программирование
и ничего не знаете о DHTML и CSS, вам
следует начать именно с этой книги.
| 14 | DHTML и CSS для Internet
Содержание книги
С того времени, как самые популярные
браузеры Netscape Navigator и Internet Ex-
plorer начали поддерживать DHTML и CSS,
Internet значительно изменился. Войны
браузеров, взрыв dot-com (и последующее
падение), огромный рост популярности
Глобальной сети привели к сильному из-
менению технологий, которые обычно
служили для создания Web-страниц. Но
DHTML и CSS остаются теми двумя стан-
дартами, которые применяются для созда-
ния лучших сайтов.
В книге показан оптимальный путь ис-
пользования DHTML и CSS, который по-
зволит наиболее широкому кругу посе-
тителей Всемирной сети видеть ваш сайт
во всей красе.
Книга разбита на четыре части:
в первой части детально описывается,
как задействовать CSS для управления
содержательным наполнением Web-
страницы, показываются конкретные
способы управления различными внеш-
ними видами Web-страницы;
во второй части рассказывается об ис-
пользовании объектной модели доку-
мента (Document Object Model - DOM)
совместно c CSS и JavaScript для созда-
ния основных функций, обеспечиваю-
щих работу динамических (меняющих
свои атрибуты) элементов страницы.
Показано, как создать DOM, позволяю-
щую запускать этн функции при помо-
щи коротких программных кодов во
многих браузерах;
в третьей части приведены примеры
DHTML и CSS, взятые из реальной
жизни, а также рассказано, как исполь-
зовать популярное программное обес-
печение (Adobe GoLive и Macromedia
Dreamweaver) и о том, как исправлять
ошибки в коде;
приложения включают ссылки на всю
информацию, содержащуюся в первых
двух частях книги, а также список
шрифтов, поддерживаемых браузером,
инструментов и ресурсов, которые мо-
гут использовать Web-дизайнеры.
Читательская аудитория
Если вы сразу обратили внимание на эту
книгу, то вы, вероятно, уже хорошо зна-
комы с особенностями Всемирной паути-
ны (World Wide Web). Для изучения
представленного здесь материала нужно
хоть немного знать HTML (HyperText
Markup Language - язык разметки гипер-
текста). Необязательно быть экспертом в
данной области, но необходимо пред-
ставлять, чем отличается тег <р> от тега
<br>. При чтении некоторых глав вам так-
же потребуется знание JavaScript.
Таким образом, чем больше вы знаете о
HTML и JavaScript, тем более полезной
для вас будет книга.
Почему стандарты
все еще имеют значение
Первый меридиан и время по Гринвичу -
это стандарты, которые позволяют нам
определить наше положение на земном
шаре с большой точностью. Эти стандар-
ты могут применяться в любое время в
любом месте и любым человеком. Они
всем известны н понятны, так как все люди
договорились их использовать.
Стандарты позволяют кораблям путеше-
ствовать по морю и не врезаться в землю
(как правило), а самолетам летать по небу и
не сталкиваться друг с другом. И эти стан-
дарты открыли весь мир для путешествий
не потому, что они так уж совершенны, а
просто потому, что все люди приняли их.
Звучит неплохо, не правда ли?
Введение | 15 |
Каждый является Web-дизайнером
В будущем каждый сможет стать
Web-дизайнером. По мере того как
растет Web, все большее количество
людей используют эту среду для того,
чтобы сообщить о себе миру в какой
бы то ни было форме. Это может
быть н кинолюбитель, восхваляющий
какой-нибудь фильм, и многонацио-
нальная корпорация, рекламирующая
свои продукты. Но все - и отдельные
люди, и компании - считают Web
способом рассказать о себе.
Как пользователь, работающий с тек-
стовым процессором, является в неко-
тором смысле издателем, так с ростом
популярности Internet каждый, кто не
только пассивно просматривает страни-
цы, является Web-дизайнером и должен
знать, как они разрабатываются.
Изучение DHTML и CSS - ваш следую-
щий шаг в Web-дизайне.
Идея стандартизации была основным
принципом при создании сети Web: ин-
формацию нужно было передавать меж-
ду компьютерами по всему миру и ото-
бражать именно так, как того желает ее
автор. Вначале существовала лишь одна
форма HTML, с которой работали все
пользователи сети. Это не вызывало ни-
каких проблем, так как все использовали
Mosaic - самый первый графический брау-
зер, полностью совместимый со стандар-
том сети. Так было раньше.
Потом появился Netscape, и с ним пришли
первые HTML-расширения. Эти расшире-
ния работали только в Netscape, поэтому те,
кто не использовал этот браузер, не могли с
ними работать. Хотя расширения Netscape
игнорировали стандарты World Wide Web
Consortium (W3C), большинство из них
(или их версии) постепенно стали частью
этих стандартов. Как говорят специалисты,
с тех пор в сети Web начался хаос.
Сеть Web представляет собой способ обме-
на информацией, аналогов которого не су-
ществовало с тех самых пор, когда люди
жили в поселениях, вечерами собирались
вокруг костров и рассказывали друг другу
истории. Проблема заключается в том,
что, не имея стандартов, не все люди посе-
ления смогут добраться до костра Web. Вы
можете использовать самые совершенные
технологии. Вы можете добавить Flash,
JavaScript, VBScript, QuickTime-видео, слои
и привязку данных, но если не все браузе-
ры смогут увидеть вашу работу, это зна-
чит, что множество пользователей не по-
лучат информацию.
При кодировке данной книги мы потрати-
ли 35-45% времени на настройку коррект-
ной работы листингов программ в Internet
Explorer 5+, Netscape б+, Opera 6+ и Safari 1.
Этот принцип сохраняется для многих
Web-проектов.
| 16 | DHTML и CSS для Internet
Много времени при Web-программиро-
вании уходит на то, чтобы обеспечить со-
вместимость с разными браузерами. Если бы
они придерживались общих стандартов, это
время снизилось бы практически до нуля.
Поэтому, если вы желаете стать дизайне-
ром, вам следует знать стандарты Web, ис-
пользовать их по максимуму и требовать,
чтобы производители бразуеров тоже их
использовали. Проект Web Standards Project
(www.webstandards.org) представляет собой
рабочую группу, которая следит за тем, что-
бы производители браузеров поддержива-
ли стандарты, которые они помогали созда-
вать. Включайтесь!
Значения и единицы
измерения
Для определения различных элементов вам
понадобятся разные значения. В зависимо-
сти от элемента эти значения принимают
различную форму. Некоторые из них про-
сты и понятны, например числа, но другие
требуют специальных единиц измерения.
Выражения в угловых скобках (О) представ-
ляют собой возможные значения (табл. 1).
Слова, написанные моноширинным шрифтом, явля-
ются литералами и должны быть напечатаны
соответствующим образом.
Длина
Размерности длин можно разделить на два
вида:
относительные длины, которые зави-
сят от типа компьютера (табл. 2);
абсолютные длины, которые одинако-
вы для любого типа компьютера и про-
граммного обеспечения (табл. 3).
Для наилучшего взаимодействия опера-
ционной системы и браузера при описа-
нии размера шрифтов рекомендуется ис-
пользовать пиксели.
Цвет
Цвет на экране можно описать по-разно-
му (табл. 4), но в основном это лишь раз-
личные способы объяснения компьютеру,
Netscape 4: как умерла легенда
Хотя мы полностью убеждены в том, что кодировка должна быть рассчитана на
максимально широкую аудиторию, приходит время, когда вы понимаете, что об-
ратная совместимость может привести и к негативным результатам. Время
Netscape 4 пришло и ушло. По оценкам специалистов в настоящее время пользо-
ватели этого браузера составляют менее одного процента от всех пользователей
сети. Но еще более важно то, что Netscape 4 поддерживал далеко не все стандарты,
поэтому настройка совместимости браузера требовала значительных усилий, а
Web-дизайн имел ряд ограничений.
При создании этой книги мы приняли трудное решение: отказаться от поддержки
Netscape 4. Данная книга включает несколько скриптов для исправления проблем
в Netscape 4, а также раздел, посвященный объектной модели документа, но боль-
шинство DHTML-скриптов не будут работать в Netscape 4. Это позволяет не толь-
ко существенно упростить листинги примеров для этой книги, ио и расширить их
возможности при работе с DHTML.
Введение | 17 |
Таблица 1.лНабор возможных значений
Тип величины Описание Пример
<number> Целое 1. 2, 3
<length> Измерение расстояния или размера 11П
<coloг> Цвет red
<percentage> Пропорция 35%
<URL> Абсолютный или относительный путь к Internet-файлу http://www.mySite.net/bob/ graphicsZimage1.gif
Таблица 2. Относительные длины
Обозначение Тип единицы Описание Пример
ет Em dash Ширина буквы <«М>> для данного шрифта Зет
ex x-height Высота маленькой буквы «х» для данного шрифта 5ех
рх Pixel Базируется на разрешении 125рх
монитора
Таблица 3. Абсолютные длины
Обозначение Тип единицы Описание Пример
pt Пункты Обычно используется для обозначения размера шрифта. 1 pt = 1/72 дюйма I2pt
рс Пики Обычно применяется для описания размера шрифта. 1 рс - 12 pt Зрс
тт Миллиметры 25mm
ст Сантиметры 5.1cm
in Дюймы 1 дюйм = 2,54 см 2.25in
Таблица 4. Цвет
Обозначение Описание Пример
&RRGGBB Шестнадцатеричный код красного, йСсззгр
зеленого, синего цвета (00-99, AA-FF) «C3F
rgb Численные значения, соответствующие красному, зеленому, синему (#R, #G, #В) цвету(0-255) rgb(204.51,255)
rgb(R%,G%,B%) Процентное содержание красного, зеленого, синего цветов от 100% каждого цвета (0-100%) rgb(B1%,18%, 100%)
name Название цвета Purple
| 18 | DHTML и CSS для Internet
сколько нужно взять красного, зеленого и
синего, чтобы получить нужный цвет.
Некоторые цвета всегда отображаются
определенным образом на любом мони-
торе. Они называются цветами, которые
сохраняет браузер. Их легко запомнить,
потому что их числовые значения не ме-
няются. В шестнадцатеричной системе
можно использовать комбинации 00, 33,
66, 99, СС или FF. В качестве численных
значений применяются 0, 51, 102, 153,
204,255, а в качестве процентных-0,20,
40, 60, 80, 100.
Проценты
Размерность многих элементов в этой кни-
ге - проценты. Процентные значения зави-
сят от используемого элемента.
URL
URL (Uniform Resource Locator) - это
уникальный адрес какого-либо объекта
в Web. Это может быть HTML-доку-
мент, графическое изображение, CSS-
файл, файл JavaScript, аудио- или видео-
файл, CGI-скрипт или другие файлы.
Свойство CSS---------- —j
'Значение' Совместимость
Тип значения
^cursor name> IE4, N6, CSS2
Литерал-------
(набирается
как в примере)
<url>
auto
•none
CSS2
IE4, N6, CSS2
IE4, N6, CSS2
Версия CSS, а которой
добавлено это свойство
Возможные
значения Версия Netscape Navigator, начиная с которой
свойства поддерживается зто свойство
Версия Internet Explorer, начиная с которой
поддерживается это свойство
Рис. 1. Возможные свойства значения cursor
На рис. 1 представлен набор возможных значений описываемого CSS-свойства, самая
ранняя версия браузера, в которой поддерживается это свойство, а также версия CSS,
в которой оно было введено. Помните, что, даже если значение поддерживается опре-
деленной версией браузера, оно может быть недоступно операционным системам.
В приложении С дан перечень операционных систем, позволяющих работать с тем
или иным значением, а также указаны возможные проблемы при использовании кас-
кадных таблиц стилей (CSS).
Введение | 19 |
URL может быть локальным, то есть
просто описывающим местоположение
ресурса, относящегося к текущему до-
кументу, или глобальным, то есть опи-
сывающим абсолютное местоположе-
ние ресурса в Internet. Глобальный URL
начинается с http://.
Ссылки также используются в примерах
программного кода, приведенных в кни-
ге. Для обозначения ссылок, которые мо-
гут указывать на любой URL, применяет-
ся знак решетки (#):
<а href=”#">Link</a>
С помощью такой ссылки мы попадаем
в начало текущей страницы. Знак решет-
ки (#) можно заменить любым другим ад-
ресом.
Однако для некоторых ссылок размещение
адресов в href определяется функциями
DHTML. В этом случае будет использовать-
ся встроенная функция JavaScript void(): <а
->href="javascript: void('‘)">Link</a>, В та-
ком написании функция определяет ссылку,
которая никуда не ведет.
HTML или XHTML?
Сеть Web сейчас переживает ряд мета-
морфоз, так как ее язык меняется с
HTML на XHTML. Хотя структура этих
языков очень похожа, язык XHTML
менее подвержен ошибкам.
В данной книге мы использовали
XHTML в качестве языка Web-npo-
уграммирования.
| 20 | DHTML и CSS для Internet
Программное обеспечение
DHTML, как и HTML, не требует какого-
либо специального или дорогого про-
граммного обеспечения. Код DHTML -
просто текст, и его можно редактировать
с помощью обычной программы, напри-
мер SimpleText (Mac OS) или NotePad
(Windows). Но что действительно нужно
для того, чтобы запускать код DHTML, -
это браузер версии 4.0 нли более поздней.
В приложении приведен список весьма
полезных (а в большинстве случаев - бес-
платных) программ, которые пригодятся
прн создании Web-сайтов.
Несколько программ значительно упро-
щают работу с DHTML и CSS благодаря
автоматизации многих часто повторяю-
щихся задач Web-дизайна, решение кото-
рых весьма утомительно из-за набора
большого количества кода. Я рекомендую
использовать Adobe GoLive и Macromedia
Dreamweaver. Третья часть книги помо-
жет вам выбрать наиболее подходящую
программу.
Web-сайт,
посвященный книге
Скорее всего, вы часто будете использо-
вать примеры кода из этой книги, одна-
ко будьте внимательны: простое перепе-
чатывание может привести к ошибкам.
Некоторые книги продаются с CD, кото-
рый содержит все необходимые листин-
ги. Но как вы думаете, кто платит за та-
кой диск? Конечно, вы.
Купив эту книгу, вы получите доступ
к огромному ресурсу знаний, который ког-
да-либо существовал, - к Internet. И имен-
но там вы сможете найти примеры из этой
книги.
Сайт www.webbedenvironments.com/dhtml/
для Visual QuickStart Guide (рис. 2) поддер-
живается автором данной книги. Здесь вы
найдете статьи о Web, примеры листингов,
а также любые важные обновления и ис-
правления.
Некоторые из приведенных программных
кодов не работают без дополнительных
файлов, которые использовались для их со-
здания. Но не волнуйтесь - на сайте вы най-
дете различные примеры, которые можно
посмотреть в режиме online и сравнить ре-
зультаты..
Если у вас есть вопросы по DHTML, вы
вправе задать их мне, отправив электрон-
ной почтой по адресу:
vqs-dhtml@webbedenvironments.com.
Обязательно посетите сайт издательства
«Peachpit Press»: www.peachpit.com/vqs/
DHTML.
Введение |~ 21 |
Рис. 2. Web-сайт для Visual QuickStart Guide доступен 24 часа в сутки
Создан с использованием DHTML
На сайте www.webbedenvironments.com/dhtml/builtwith/ размещен список браузеров,
поддерживающих DHTML. Вы можете задействовать эмблему «Создан с использо-
ванием DHTML» (Built with DHTML) как ссылку на этот сайт с вашей DHTML-стра-
ницы, чтобы помочь посетителям выбрать правильный браузер (рис. 3).
BUILT WITH
DHTML
Рис. 3. Создан с использованием DHTML. Применяйте эту эмблему как ссылку на сайт, на котором
размещен список браузеров, поддерживающих DHTML
| 22 | DHTML и CSS для Internet
Принятые обозначения
В большинстве случаев текст, таблицы,
рисунки, листинги не будут требовать до-
полнительных объяснений. Но все же не-
обходимо ознакомиться с некоторыми
обозначениями, которые помогут вам в ос-
воении представленного материала.
CSS-таблицы. Каждый раздел первой час-
ти, в котором описываются CSS-свойства,
включает в себя таблицу, позволяющую
быстро найти различные значения, кото-
рые используются как в данном свойстве,
так и в браузерах и CSS-слоях, с которыми
совместимы эти значения (рис. 1). В ко-
лонке совместимости отображена самая
ранняя версия браузера (Netscape и Internet
Explorer), где поддерживается представ-
ленное значение. В табл. 5 перечислены аб-
бревиатуры.
Листинги. В книге применяется несколь-
ко методов представления листингов. Это
сделано для того, чтобы их можно было
легко отличить от самого текста.
Вот как выглядит код:
<style>
р { font-size: 12pt; }
</style>
Все программные коды в книге набраны
строчными буквами (см. «Код - заглавные
или строчные буквы?»). К тому же в лис-
тингах всегда используются прямые ка-
вычки (’’ или '), а не фигурные (“ ” или ’):
программный код с фигурными кавычка-
ми просто не будет работать.
Важные места в листингах, обсуждаемые
на конкретной странице, выделены полу-
жирным шрифтом.
Таблица 5. Сокращенные названия браузеров
Аббревиатура Тип браузера
IE3 Internet Explorer 3
IE4 Internet Explorer 4
IE5 Internet Explorer 5
IE6 Internet Explorer 6
N4 Netscape 4
N6 Netscape 6
Когда вы набираете строку кода на ком-
пьютере, она может быть сколь угодно
длинной, в то время как в книге, к сожа-
лению, строка иногда просто не помеща-
ется на странице. В таком случае ставится
стрелка (->), показывающая, что строка
продолжается, например:
.title {font: bold 28pt/26pt times,
- > serif; color: #FFF; background-color;
- > #000; background-image: url(bg_
- > title.gif); }
Часто co строки кода будет начинаться ка-
кой-либо шаг. Это сделано, чтобы за-
острить ваше внимание на том, где имен-
но в большой программе реализуется дан-
ный шаг.
Полужирным шрифтом в тексте оформля-
ются элементы интерфейса: названия окон,
пунктов меню, команд, а также клавиш.
Курсивом помечены базовые термины и
определения.
® Данный значок обращает ваше внимание
на важные сведения.
| Этот значок предваряет дополнительную
П информацию, относящуюся к излагаемому
I---1 материалу.
| ~| Так помечены советы, которые помогут
вам в практической работе.
ГЛЛЛЛ !♦ Введение в CSS.............................24
ГЛЛЛЛ 2* Основы CSS.................................47
ГЛЛЛЛ !♦ Управление шрифтом.........................94
глллл 4Ф Управление текстом........................112
глллл £♦ Управление элементом......................134
ГЛЛЛА £♦ Управление позиционированием..............167
ГЛЛЛЛ ?♦ Управление видимостью элемента............187
глллл ОФ Управление списком,
таблицей и интерфейсом.....................196
1
HTML не является мечтой дизайнера, став-
шей явью. Он неточен, непредсказуем и не-
постоянен, когда дело касается представле-
ния различных типов информации.
Язык HTML не предназначался для работы
со сложными графическими изображения-
ми и мультимедиа. В действительности он
никогда не был чем-то большим, нежели
универсальным языком разметки текста,
распространенным в Internet, и имел весь-
ма ограниченные возможности.
HTML - язык разметки, созданный, чтобы
определять структуру документа для раз-
мещения его в Web. Это значит, что HTML
предназначен не для работы со стилями, а
для организации страницы.
Со временем в HTML было добавлено мно-
го новых тегов и технологий, позволяющих
лучше контролировать структуру и вид
документа. Появились таблицы, фреймы,
инструменты выравнивания текста, язык
JavaScript. Но страница не состоит из одно-
го текста, дизайнерам приходится исполь-
зовать различную графику.
HTML - не самая лучшая система. Когда
Web-разработчики стали требовать от
World Wide Web Consortium добавления
возможностей управления внешним ви-
дом Web-страниц, W3C, чтобы заполнить
дыры в HTML, представил каскадные таб-
лицы стилей (CSS) - рис. 1.1.
fccssl
Рис. 1.1. Логотип CSS
Вы, наверное, подумали: «Вот здорово,
только я выучил HTML, и все поменя-
лось!» Не волнуйтесь, CSS так же просто
изучать, как и HTML. На самом деле с CSS
иногда даже проще работать, потому что
здесь не вводятся новые теги, а использу-
ются уже существующие.
Рассмотрим, например, тег <bold>. В HTML
его функция проста: он делает шрифт по-
лужирным. В таблице стилей вы можете
переопределить этот тег так, что он будет
не просто выделять текст, а отображать его
определенным шрифтом, заглавными бук-
вами, чтобы подчеркнуть значимость на-
писанного. Можно даже сделать так, что
тег <bold> не будет выделять текст полу-
жирным шрифтом.
Прочитав эту главу, вы узнаете, как функ-
ционируют каскадные таблицы стилей,
познакомитесь с основами их построения.
Далее вы научитесь применять отдельные
свойства таблиц.
Применяемые Название
стили стиля Документ
Рис. 1.2. Стили, которые применяются к заголовку
раздела в теге текстового процессора
Рис. 1.3. Использование CSS на HTML-странице
для добавления картинки на задний план. Текст
при этом форматируется, смещается вправо
и вниз
_____________Определение стиля [~25~|
Определение стиля
В настоящее время многие текстовые про-
цессоры позволяют обрабатывать текст не
только последовательно, то есть слово за
словом, но и путем изменения всего доку-
мента с помощью стилей.
В стиле (Style) собраны различные свой-
ства текста, например шрифт и размер,
которые можно использовать для похожих
частей текста, скажем заголовков. Таким
группам свойств дается обычное имя. До-
пустим, вы хотите, чтобы все заголовки
разделов в документе были напечатаны
полужирным курсивом, шрифтом Times
размером 14 пунктов. Вы можете присво-
ить все эти свойства стилю «Заголовок раз-
дела» (рис. 1.2).
Каждый раз, когда вьгвводите заголовок
раздела, вам нужно воспоиьзоваться дан-
ным стилем, и все описанные свойства
сразу же применятся к тексту. А если по-
том вы решите поменять размер шриф-
та с 14 на 18 пунктов, достаточно внести
изменения в описание стиля «Заголовок
раздела». Текстовый процессор изменит
все части текста, помеченные этим сти-
лем в документе.
| 26 | Введение в CSS
Каскадные таблицы
стилей
Каскадные таблицы стилей (Cascading
Style Sheets - CSS) позволяют устанавли-
вать стили за один раз, та же функция при-
сутствует в большинстве текстовых про-
цессоров. Вы можете создать каскадную
таблицу стилей в главном документе, и ее
действие распространится на все HTML-
теги на одной странице или на всем сайте.
Несмотря на то что CSS работает с HTML,
это не HTML. Более того, CSS представля-
ет собой отдельный код, который расши-
ряет возможности HTML, позволяя пере-
определять уже существующие HTML-
теги (рис. 1.3 и 1.4).
Например, тег, устанавливающий грани-
цы абзаца, <р>... </р>, в основном служит
для выделения пространства между абза-
цами. Однако, используя CSS, несложно
поменять природу этого тега так, что текст
внутри него будет выделяться полужир-
ным курсивом, шрифтом Times размером
14 пунктов (рис. 1.5). Как и при работе со
стилями текстового процессора, вы може-
те поменять определение тега <р> и, сле-
довательно, вид всех абзацев на Web-сайте.
В табл. 1.1 перечислены некоторые свой-
ства тегов, которые можно изменять с по-
мощью CSS, а также главы, в которых об
этом рассказывается.
Рис. 1.4. Тот же код представлен без
использования CSS. На странице, в отличие
от рис. 1.3, отсутствует форматирование
ПРИстилиМЫе Тег HTML Документ
Рис. 1.5. Применение стилей к HTML-тегу
Каскадные таблицы стилей | 27 |
Г 1 Достоинство CSS заключается в возможно-
сти смешивать и сопоставлять различные
।' правила из разных источников, чтобы при-
дать Web-странице вид, соответствующий
ее конкретному назначению. Это напомина-'
ет программирование, что неудивительно,
так как таблицы стилей создавались про-
граммистами, а не дизайнерами. Но как
только вы привыкнете к CSS, работа с ними
станет для вас столь же естественной, сколь
и составление связного текста из отдельных
предложений.
S Каскадные таблицы стилей не являются
единственными таблицами стилей, доступ-
ными в Internet. Netscape 4 также поддержи-
вает таблицы стилей JavaScript. Однако CSS
используются чаще, и они одобрены W3C.
Таблица 1.1. Свойства, которые можно изменять с помощью CSS
Свойство Объект управления Описание в книге
Шрифт (font) Форма и размер букв, жирный или курсив Глава 3
Текст (text) Кернинг, интервал между строками, выравнивание, регистр Глава 4
Список и указатель мыши (list&mouse color) Маркеры, отступ Глава 5
Фон (background) Задний план страницы или элемента Глава 5
Рамка, поле Рамки, поля, внутренний отступ, Глава 5
(border&margins) ширина, высота
Позиционирование (positioning) Точное положение на экране Глава 6
Видимость (visibility) Видимость на экране элемента или какой-либо его части Глава 7
| 26 | Введение в CSS
Что дальше: CSS третьего уровня
Компания W3C продолжает работу над новым изданием каскадных таблиц стилей:
CSS третьего уровня (www.w3.org/Style/CSS/current-work). В этой новой версии
будут решены многие проблемы, с которыми не может до конца справиться вер-
сия CSS2.
Хотя стандарт новой версии по-прежнему находится в разработке (уже на протя-
жении нескольких лет), новые функции CSS3 вызывают большой интерес. Вот
некоторые из них:
столбцы - самая интересная новая функция CSS3 заключается в возможности
создания дизайна, который состоит из столбцов. В CSS возникают сложности
при замене таблиц, состоящих из нескольких столбцов. CSS3 в идеале должна
решить эту проблему;
Web-шрифты - хотя теоретически CSS2 и поддерживает функцию загрузки
шрифтов, работать с ней довольно трудно. Компания W3C старается сделать так,
чтобы CSS3 работала в сети Internet без проблем;
цветовые профили - распространенная проблема при работе с графическими
изображениями заключается в том, что они могут выглядеть более яркими или
более тусклыми, в зависимости от того, на каком компьютере вы работаете. CSS3
позволит разработчикам добавлять описания цветов, чтобы решить данную
проблему;
пользовательский интерфейс - CSS3 будет использовать дополнительные кур-
соры, формы и функции для обработки цветовых форм, которые удобны посе-
тителю;
поведение - одна из наиболее любопытных новых функций CSS3, которая по-
зволяет задавать не только стили визуального отображения, но и поведение
объектов. Это позволит сделать управление CSS более динамичным.
Версии CSS | 29 |
Версии CSS
Под руководством W3C (на рис. 1.6 пред-
ставлена домашняя страница организа-
ции) CSS развивались на протяжении не-
скольких лет. Последняя версия получи-
ла название CSS Level 2 или CSS2 - CSS
второго уровня. Большинство современ-
ных браузеров поддерживают поздние
версии CSS. более старые браузеры -
комбинацию ранних версий CSS. В при-
ложении указывается, какие браузеры со-
вместимы с определенными CSS-свой-
ствами. Ниже приводятся основные све-
дения об уровнях CSS:
CSS первого уровня (CSS Level 1 или
CSS1). Первая официальная версия CSS
была выпущена W3C в 1996 году. Она
включает в себя основные возможнос-
ти, такие как форматирование текста,
выбор шрифта, установка полей. Net-
scape 4 и Internet Explorer 3/4 поддержи-
вают этот уровень;
позиционирование в CSS (CSS-P). Web-
дизайнерам нужен был специальный
инструмент, чтобы точно располагать
элементы на экране. Версия CSS1 уже
вышла, a CSS2 еще не появилась, и W3C
предложил временное решение - пози-
ционирование в CSS. Этот стандарт
представлял собой некое предложение,
которое заинтересованные стороны
могли бы обсуждать некоторое время,
прежде чем оно получит официальный
статус. Netscape и Microsoft успешно
включили предварительные варианты
в браузеры четвертой версии. Поддер-
живают ли Netscape и Microsoft CSS-P?
Можно сказать, что это так. Несмотря
на то, что основные характеристики
присутствуют в браузерах обеих фирм-
производителей, некоторые моменты
все же были упущены;
Рис. 1.6. Домашняя страничка CSS
| 30 | Введение в CSS
CSS второго уровня (CSS Level 2 или
CSS2). Эта версия CSS вышла в 1998 г.
Второй уровень включает в себя все
свойства двух предыдущих версий,
особое внимание уделяется междуна-
родному доступу и возможности опре-
деления медиа-особенностей CSS. Inter-
net Explorer 5 и Netscape 6 поддержива-
ют CSS2;
CSS третьего уровня (CSS Level 3 или
CSS3). Эта версия еще находится в ста-
дии разработки. Но даже после ее выпус-
ка браузеры только через несколько лет
начнут ее поддерживать. Самым важ-
ным отличием CSS3 от остальных вер-
сий, несомненно, станет масштабируе-
мая векторная графика (Scalable Vector
Graphics - SVG). Этот формат позволит
добавлять формы (линии, круги, сплай-
ны и т.д.) в векторном, а не в растровом
представлении, то есть все преимуще-
ства векторной графики будут доступны
в Web. О векторном и растровом пред-
ставлении подробно рассказано в главе 3,
раздел «Оформление в Web».
г~П Наверное, вам будет интересно узнать, в чем
Q заключается различие между версиями CSS.
।1 Впрочем, это необязательно для того, что-
бы использовать стили в сети Internet. Что
вам действительно необходимо, - это знать,
какие именно стили поддерживаются брау-
зерами, дизайн для которых вы двлавтв.
Следует учесть, что в зависимости от
версии браузера им может поддержи-
ваться та или иная версия таблиц стилей,
в приложении А указано, какие браузеры
поддерживают какие функции CSS.
Типы правил CSS
И
Типы прапил CSS
Каскадные таблицы стилей очень просто
использовать. Для них не требуются моду-
ли расширения (plugins) или сложное про-
граммное обеспечение. CSS - всего лишь
правила, которые определяют, как должен
выглядеть HTML и как он должен реагиро-
вать на действия пользователя.
Вы можете установить правила преобразо-
вания HTML или создать общие правила
> и применять их к тегам по своему усмот-
Г рению.
ГТ^“| Не путайте селектор HTML-тега с его атри-
|д бутами. В следующем примере img-селек-
'----1 тор, a scr - атрибут.
<img scr="picture.gif">
rzz"| Хотя тег <р>, выделяющий абзац, часто ис-
| Ц пользуется без закрывающего тега </р>,
' J при определении в CSS закрывающий тег
обязательно нужно включать. CSS-правила
будут применяться в общем случае только
к тегам, имеющим и закрывающий, и от-
крывающий теги. Но есть несколько ис-
ключений, например тег <img>.
Существует три типа CSS-правнл:
£ а HTML-селектор-текстовая часть HTML-
£ тега. Например, ЬЗ - селектор тега <h3>.
В правилах каскадных таблиц стилей се-
| лектор используется для переопределе-
| ния результата действия тега (раздел «Пе-
£= реопределенне HTML-тега» в главе 2).
& Пример:
ft р { font: bold 12pt times; }
I класс представляет собой «свободное»
v правило, которое можно применять
к любому HTML-тегу. Классу разреша-
ется дать любое имя (см. приложение В).
f Так как класс применим ко множеству
тегов, он является самой гибкой разно-
I. видностью селектора (см. раздел «Опре-
деление классов для создания тегов» в
главе 2).
Пример:
. tnyClass { font bold 12pt times; }
а правила ID могут так же, как и классы,
применяться к любым HTML-тегам.
Однако селекторы ID обычно приме-
няются к определенному HTML-тегу
на странице один раз - для использо-
вания в функции JavaScript (см. раздел
«Определение ID для идентификации
объекта» в главе 2).
Пример:
ttobjectl {position: absolute; top: lOpx;}
Теги должны быть написаны
прописными или строчными буквами?
HTML-тегн могут писаться как пропис-
ными, так и строчными буквами. Это
значит, что для браузера не важно, вве-
дены лн селекторы (и текст) строчны-
ми буквами, либо прописными. Боль-
шинство пользователей предпочитают
писать теги прописными буквами, так
как это позволяет выделить их на фоне
окружения.
Мы тоже делали именно так до тех пор,
пока не появился стандарт XHTML.
Одной из важных особенностей
XHTML является то, что парсер вос-
принимает разницу между пропис-
ными и строчными буквами, и все
селекторы должны быть введены с
помощью строчных букв. Поэтому
мы начали использовать в HTML-те-
гах селекторы, введенные с помощью
строчных букв, чтобы подготовиться
к следующему этапу эволюции HTML.
| 32 | Введение в CSS
Составляющие CSS-правил
Все правила, независимо от нх местопо-
ложения и типа, состоят из трех частей:
селекторы представляют собой буквен-
ные или численные символы, которые
определяют правило. Селектор может
быть селектором HTML-тега, классом
нлн ID;
свойства описывают вводимый эле-
мент. Существует несколько десятков
свойств, каждое из которых отвечает за
некий аспект оформления страницы и
присутствующие на ней эффекты;
значения определяют природу свойства.
Значение может представлять собой
ключевое слово, например «yes» или
«по», число или проценты. Тип исполь-
зуемого значения зависит только от
свойства, которому оно приписывается.
Кроме селектора CSS-правило содержит
свойства и значения, которые в совокупно-
сти называются определением. На рис. 1.7
представлен синтаксис правила.
Правило
I-----------“J"-------------1
selector {property:value;}
HTML, класс или ID Определение
Рис. 1.7. Основной синтаксис CSS-правила
Составляющие CSS-правил | 33 |
Что такое World Wide Web Consortium
World Wide Web Consortium (W3C) - организация, устанавливающая стандарты,
которые используются создателями браузеров.
Эта организация была создана в 1994 г. Ее цель можно сформулировать так: до-
биться развития Всемирной паутины с помощью разработки обычных протоко-
лов, которые обеспечат эволюцию Web и взаимодействие в нем.
В W3C входит более 400 организаций всего мира - поставщики технического и
программного обеспечения, компании-поставщики контента (содержания), корпо-
ративные пользователи, исследовательские лаборатории, органы управления и
правительства разных стран.
Согласно информации, опубликованной на сайте W3C, Консорциум ставит перед
собой три задачи:
универсальный доступ. «Нужно сделать Internet доступным для всех, создавая
технологии, в которых учитываются различия культурного, образовательного
уровня пользователей, их материальный достаток и физические возможности»;
семантика Web. «Необходимо разработать программное обеспечение, которое по-
зволит каждому пользователю применять Web-ресурсы нанлучшим образом»;
доверие. «Нужно управлять развитием Internet осторожно, при помощи зако-
нов, коммерческих и социальных изданий, которые возникают при использова-
нии этой технологии».
2 Тиге Дж. К.
| 34 | Введение в CSS
| л I После последнего определения в списке не
U нужно ставить точку с запятой, но, как по-
‘----1 казывает опыт, ее все же лучше поставить,
чтобы избежать неприятностей в будущем.
Если вы решите добавить что-либо в опре-
деление и забудете поставить точку с запя-
той, вы можете полностью испортить пра-
вило. И не только одно конкретное опреде-
ление, но и все другие определения в этом
правиле перестанут работать (см. раздел
«Обнаружение ошибок CSS» в главе 21).
| । Хотя Netscape версии 4 и выше и Internet
(J Explorer версии 3 и выше поддерживают
'----1 CSS, ни один из этих браузеров не позво-
ляет работать со всеми возможностями
CSS, а число этих возможностей зависит от
версии браузера. Поддерживается то или
иное свойство в данной версии браузера,
можно узнать в приложении А.
Размещение CSS-правил
Правила можно установить в трех мес-
тах:
в HTML-теге внутри документа,
чтобы изменить один тег в докумен-
те. Такие правила часто называют
inline-правилами (см. раздел «Добав-
ление стилей в HTML-тег» в главе 2);
в заголовке документа для примене-
ния ко всей странице. Такие правила
называют встроенными (см. раздел
«Добавление стилей на Web-страни-
цу» в главе 2);
во внешнем документе, который
связан с вашим или импортирован.
В этом случае правила используются
для всего сайта. Такие правила назы-
ваются внешними (см. раздел «Добав-
ление стилей на Web-сайт» в главе 2).
Положение правила в документе
и в других правилах определяет их об-
щее влияние на документ (см. раздел
«Определение каскадного порядка» в
главе 2).
Рис. 1.8. Домашняя страница HTML компании W3C
___________CSS и языки разметки | 35 |
CSS и языки разметки
Последняя версия HTML, HTML 4.01, была
выпущена в декабре 1999 г. компанией
W3C. HTML 4.01 включает методологию
таблиц стилей (которая раньше имела фор-
му отдельного стандарта) в качестве специ-
фикации HTML (рис. 1.8).
Это не значит, что CSS стала тем же самым,
что HTML; это значит, что теперь HTML
зависит от функциональности CSS.
Концепция W3C звучит так: таблицы сти-
лей должны использоваться для того, что-
бы «избавить HTML от поддержки функ-
ций презентации».
Что имеется в виду: больше не нужно бес-
покоить нас с требованиями увеличить ко-
личество HTML-тегов. Вместо этого вы мо-
жете использовать таблицы стилей.
Вероятно, это очень хорошая идея. Это
значит, что любой пользователь может
применять HTML-теги независимо от того,
является он Web-дизайнером или нет.
А Web-программист может с помощью
CSS изменять стандартные HTML-теги и
добиваться более профессионального ре-
зультата.
Кроме того, это значит, что CSS можно ис-
пользовать с другими языками разметки,
например с XML, XHTML н даже SVG, при-
чем так же просто, как и с HTML. В этой
книге мы сконцентрируем внимание на ис-
пользовании CSS с HTML, но вся приведен-
ная здесь информация может с таким же
успехом применяться при работе с другим
языком разметки.
| 36 | Введение в CSS
Что такое XML и XSL
Язык разметки SGML является праязыком большинства языков разметки, которые
используются для печати и сети Internet. Язык SGML - это международный стан-
дарт, который используется для определения структуры и внешнего вида докумен-
тов. Для различных типов документов и разных дисциплин, например физики,
бухгалтерии и химии, были созданы разные языки SGML. По сравнению с полной
версией SGML, HTML уступает в некоторых ключевых областях.
Язык XML (www.w3.org/XML)> как и HTML, является версией SGML. В отличие от
HTML язык XML дает Web-дизайнерам возможность не только задавать структуру
страницы, но и тип информации, которая показывается. XML'создает Web-стра-
ннцы, которые позволяют работать с базами данных и являются очень удобными
для поиска и управления. Поэтому XML считается самым великим событием в сети
Internet со времени возникновения HTML.
XML работает аналогично HTML и CSS. Он состоит из тегов, которые описывают,
как именно браузер должен показывать документ. Автор документа создает свои
собственные теги, чтобы точно идентифицировать содержимое документа и его
различных частей. Затем автор создает файл описания DTD, в котором указывает,
что именно обозначает каждый тег. Файл DTD определяет имена тегов, информа-
цию, которую они содержат, а также контекст для использования тегов.
Предположим, что у вас имеется следующий контекст: доктор, Джон Смит (John
Smith), UNIT. На первый взгляд, некоторые объекты в списке имеют очевидное
значение: «доктор» - это название профессии, а «Джон Смит» - имя человека. А что
такое «UNIT»? Кроме того, первые два объекта могут использоваться вовсе не так,
как кажется на первый взгляд. Для компьютера все эти объекты представляют со-
бой лишь набор символов, которым заранее не присуще определенное значение.
При помощи XML вы сможете «научить» браузер определять различие между на-
стоящим именем, кратким псевдонимом и названием организации. Также вы смо-
жете указать браузеру, как следует отображать каждый из этих элементов.
Язык XSL используется с XML или XHTML для описания стилизованного докумен-
та. Похоже на CSS, верно? Однако XSL не только описывает стили (как CSS), он
полностью определяет структуру содержимого, порядок и правила, влияющие на
порядок (включая разбивку на страницы). По сути дела, XSL,мoжeт работать с CSS2
для создания страниц, которые отличаются повышенной сложностью и гибкостью
по сравнению с CSS.
Язык XSL (www.w3.org/StyIe/XSL) конвертирует XML-документы в документы (на-
пример HTML), которые могут отображаться в сети Internet. Это особенно полез-
но в том случае, если содержимое рассчитано на показ на экране или печать, так
i как вам легче создать дизайн, поддерживаемый обеими функциями.
CSS и языки разметки
[~зУ~|
Что такое SVG
Формат SVG - это метод создания
векторной графики в сети Internet
(www.w3.org/Graphics/SVG). Каки Flash,
SVG описывает две точки, а затем стро-
ит путь между ними в виде прямой ли-
нии или кривой, а не строит отдельно
каждую точку изображения.
В отличие от технологии Flash, кото-
рая использует редактор для создания
файлов и скрывает большую часть
кода, создающего изображение, SVG
для создания векторной графики при-
меняет вариант XML. Что еще более
важно с точки зрения DHTML, SVG-
графику можно записывать скрипта-
ми в виде модели D0M (за дополни-
тельной информацией по этой модели
обращайтесь к главе 10). SVG может
включать все функции DHTML, кото-
рые описаны в данной книге.
В настоящее время W3C рекомендует
использовать SVG. Несмотря на то,
что Adobe предлагает обновление для
работы браузера с SVG, ни одни брау-
зер не имеет встроенных возможно-
стей для работы с SVG. Формат SVG
нацелен на конкуренцию с Flash.
Язык XHTML
Языки XML и XSL (см. примечание) име-
ют ряд преимуществ для Web-дизайне-
ров, одно из которых заключается в том,
что вы можете различать содержимое,
которое отображается на экране, и то, ко-
торое есть на самом деле. Нарушение
прямой связи между содержимым и ди-
зайном обозначает, что вместо того, что-
бы обрабатывать детали на каждой стра-
нице, вы можете контролировать дизайн
с единого сайта.
Но как же сделать так, чтобы Web-дизай-
неры перешли с более привычного HTML
на сложный XML? Ответ звучит просто:
XHTML.
XHTML (www.w3.org/TR/xhtml) - это гиб-
рид стандарта HTML 4.01 (www.w3.org/TR/
html401) и XML. Многие надеются, что
XHTML начнет сравнительно безболезнен-
ный переход от HTML к XML.
XHTML использует XML DTD - коллекции
описаний, которые сообщают браузеру, как
следует воспринимать структуру, элементы
и атрибуты тегов, найденных в документе.
XHTML использует те же теги, что н HTML.
Хотя Web-страницы XHTML могут вклю-
чать все возможности XML, код будет рабо-
тать даже в том случае, если браузер не вос-
принимает XML.
| 38 | Введение в CSS
Если стандарты так похожи друг на друга,
зачем переключаться между ними? W3C
говорит о двух важных причинах:
символ «X» в названии XHTML обозна-
чает «с возможностью обновления». Это
значит, что вам будет намного проще
добавить новые функции в XHTML по
сравнению с HTML. Поведение тегов
определяется DTD, а не определенным
браузером, поэтому XHTML обладает
более высокими возможностями моду-
ляции. Поэтому возможности XHTML
могут быть улучшены для новых брау-
зеров или других Web-устройств без
потери обратной совместимости;
сегодня значительная часть Web-тра-
фика поступает от «альтернативных»
платформ, например телевизоров, пе-
реносных устройств н телефонов. Если
вы думаете, что кодировка HTML для
нескольких браузеров очень сложна,
представьте, насколько она трудна для
десятков устройств. Нужно использо-
вать стандартный язык кодировки.
Кроме того, поскольку данные устрой-
ства, в целом, обладают небольшой
пропускной способностью, кодировка
должна быть максимально компакт-
ной. XHTML идеально отвечает всем
этим требованиям.
Если Web-дизайнеры начнут использовать
XHTML сейчас, они смогут применять но-
вые функции XHTML и не потерять воз-
можности HTML, над развитием которых
они так долго работали. Если вы знакомы
с HTML, то, наверняка, уже знаете и все
XHTML-теги. Главное, что вам нужно уяс-
нить, - это как можно (и как нельзя) ис-
пользовать эти теги. XHTML накладывает
на вашу работу больше ограничений по
сравнению с HTML, но эти ограничения
позволяют вам получить более четкую,
быструю и простую для понимания
HTML-кодировку.
| I Кажется, что XHTML и CSS - это будущее
Q Web-дизайна. Хотя производители браузеров
'----1 медленно адаптируются к новым стандартам,
W3C убедилась в том, что XHTML обладает
полной обратной совместимостью.
| Л I Многие HTML-теги, связанные с дизайном
|д (например <font>), даже если и не стали
'----1 ненужными благодаря новому стандарту
HTML, должны будут устареть из-за CSS.
W3C называет этот процесс амортизацией.
Хотя теги по-прежнему работают, они не
получают дальнейшего развития.
| _ I Вы можете найти дополнительную инфор-
|д мацию по HTML по адресу: www.w3.org/
1----1 MarkUo.
CSS и языки разметки | 39
Конвертирование HTML в XHTML
Так в чем же заключается отличие HTML от XHTML? XHTML сильнее ограничивает
вас по сравнению с HTML: стандарт не позволит вам выйти за рамки правил. Так
как XHTML использует те же теги, что и HTML, конвертировать один стандарт в
другой довольно просто, если вы будете учитывать следующие особенности:
нет пересекающихся тегов. Большинство браузеров не заботятся о правильном
расположении HTML-тегов, поэтому следующая кодировка должна работать
правильно:
<p>8ad <b>Nesting</px/b>
этот принцип совершенно не распространяется на XHTML. Вам нужно исполь-
зовать правильную структуру:
<p>Good <b>Nesting</bx/p>
теги н атрибуты должны вводиться строчными буквами. XML различает пропис-
ные и строчные буквы, поэтому <li> и <LI> - это разные теги. Вводите теги и ат-
рибуты строчными буквами, н у вас не должно быть проблем;
всегда используйте закрывающий тег. Часто Web-днзайнеры просто вводят тег <р>,
чтобы разделить параграфы. В XHTML вам нужно использовать следующий
формат:
<p>Your text</p>
используйте пробел и слэш в пустых тегах. Предыдущее правило не имеет смысла
для тегов <Ьг> и <li>, которые не имеют конечного тега. Чтобы тег закрывался сам,
добавьте в него пробел н слэш:
<Ьг />
ссылки не включаются. В XHTML такой код не будет работать:
<а src="this.html">Tfiis <а src=”that.html”>That</ax/a>
А так ли необходимо вам включать ссылки?
команды id и name должны использоваться вместе. Если вы идентифицируете
объект на экране, например слой, применяйте атрибуты id и name вместе, за ис-
ключением переключателей:
<div id=”object1” name=”object"1”>object</div>
а если тег содержит атрибуты, значения должны заключаться в кавычки. Следую-
щий тег введен неправильно:
<img src=mylmage.gif />
Используйте такую структуру:
<img src="mylmage.gif” />
|~40~|
Введение в CSS
Конвертирование HTML е XHTML (окончание)
амперсанд должен кодироваться в URL или другие значения атрибутов. Ампер-
санд (&) должен кодироваться как Samp;. Следующий тег введен неправильно:
<img src= "bill&ted.gif” />
Используйте такую структуру:
<img src="0ill8amp; ted. gif” />
не используйте HTML-комментарии в скрипте или контейнере стиля. В этой
книге мы покажем вам, как помещать комментарии HTML сразу после тегов
<stу 1е> и <script>, чтобы скрыть кодировку от более ранних браузеров. Вам не
следует делать этого в XHTML. Следующий тег введен неправильно:
< style> с- р { font: times; } //-> </style>
Используйте такую структуру:
< style> р { font- times; } </style>
Настройка DTD- | 41 |
Рис. 1.9. В Web-браузере отображается
документ DTD в формате HTML 4.01,
который поставляется World Wide Web
Consortium (www.w3.or<VTR/REC-
htm]40/saml/dtd.htmn
Листинг 1.1. Ter Doctype (ссылка на DTD-файл,
созданный World Wide Web Consortium)
помещается вверху кода
ЛЮТИНГ:,
<lDOCTYPE html PUBLIC "-//W3C//DTD HTML
->4.D1 Transitional//EN"
“http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Transitional
->Doctype</title>
</head>
<body>
Content...
</body>
</html>
Настройка DTD
Документ DTD - это текстовый документ,
который включает правила, определяю-
щие принципы работы языка разметки.
Хотя любой пользователь может создавать
DTD-документ, большинство Web-дизай-
неров будут использовать документы, со-
зданные (и размещенные) на World Wide
Web Consortium (рис. 1.9).
Вы можете разместить в начале XHTML-
документа тег, включающий ссылку на
DTD языка разметки, который использу-
ется вашей Web-страницей (листинг 1.1).
Но только самые последние версии брау-
зеров (Netscape 6 и более новые, Mozilla 1 и
Internet Explorer 5 для Мас и 6 для Windows)
имеют DTD-файлы, которые влияют на
внешний вид содержимого.
Если тип документа DTD не был указан,
браузер будет использовать режим со-
впадений, который работает так же, как
и существующий браузер.
Если был добавлен распознаваемый тип
файла DTD, браузер переключится в ре-
жим строгого рендерирования, который
полностью следует заданному стандарту.
| 42 | Введение в CSS
Существуют три базовых DTD для CSS,
о которых вам не нужно беспокоиться.
Эти DTD можно задать с помощью те-
гов Doctype как в HTML (листинг 1.2),
так и в XHTML (листинг 1.3):
строгий (Strict). Гарантирует, что все
стили будут управляться CSS. Теги
форматирования запрещены;
переходный (Transitional). Позволяет
вам использовать смесь CSS и наслед-
ственного HTML-форматирования для
дизайна страницы. Иногда этот фор-
мат называют «слабым»;
рамка (Frameset). Используется вместе
с HTML-документами, которые приме-
няются для создания рамок.
Хотя задача всех Web-дизайнеров заклю-
чается в том, чтобы создавать Web-стра-
ницы со строгой системой кодировки, мы
рекомендуем вам использовать переход-
ную версию тега Doctype для HTML или
XHTML.
Е Старые браузеры, которые не распознают
DTD, будут строить страницу на основании
своих принципов.
ЕВы также можете включить описание вер-
сии XML и значение кодировки выше XHTML
DTD:
<9xml version="1.0" encoding=
->“iso-8859-l"?>
Однако это может привести к неожиданным
ошибкам, особенно если вы используете
ASP, JSP и РНР. Мы рекомендуем не до-
бавлять описание версии.
Листинг 1.2. Типы тега Doctype в HTML: строгий,
переходный и рамка. Выберите один из типов для
размещения в верхней части HTML-страниц
<!DDCTYPE html PUBLIC “-//W3C//DTD HTML
->4.O1//EN”
'‘http://www.w3.org/TR/html4/strict.dtd”>
<!DDCTYPE html PUBLIC "-//W3C//DTD HTML
->4,D1 Transitional//EN"
“http://www.w3.org/TR/html4/loose.dtd”>
COOCTYPE html PUBLIC "-//W3C//0T0 HTML
->4.01 Frameset//EN''
“http://www.w3.org/TR/html4/
->frameset.dtd">
Листинг 1.3. Типы тега Doctype в HTML: строгий,
переходный и рамка. Так как XHTML базируется на
XML, вам необходимо указать версию XML.
Выберите один из типов для размещения
в верхней части HTML-страниц
JfcJ&B ,. . Листинг , ,
<!DDCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Strict//EN"
“http://www,w3.org/TR/xhtml1/DTD/
->xhtml1-strict.dtd”>
<!DDCTYPE html PUBLIC “-//W3C//DTD XHTML
->1,D Transitional//EN'’
“http://www.w3.org/TR/xhtmll/DTD/
->xhtmli-transitional.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
->1,D Frameset//EN"
"http://www.w3.0rg/TR/xhtml1/DTD/
->xhtml1-frameset. dtd”>
Типы HTML-тегов |~43~]
Таблица 1.2. Селекторы для тегов блок-уровня
Селектор Использование в HTML
blockquote Тип кавычек
center Выравнивание текста по центру
dd Описание определения
dfn Определенный терм
dir Список директорий
div Логическое деление
dl Список определений
dt Терм определения
M-7 Уровни заголовков 1-7
li Элемент списка
01 Упорядоченный список
P Абзац
table Таблица
td Данные таблицы
th Заголовок таблицы
tr Строка таблицы
ul Неупорядоченный список
Различие тегов и селекторов
HTML-селектор - это текстовая часть
HTML-тега, которая сообщает брау-
зеру о типе тега. Когда вы определяе-
те HTML-селектор, используя CSS, вы
в действительности переопределяете
HTML-тег. Несмотря на схожесть, тег
и селектор - два разных элемента.
Если вы напишете в CSS-правиле
полный HTML-тег, то есть скобки и
буквы, тег работать не будет. Поэто-
му данные понятия важно разделятыу
Типы HTML-тегов
Не каждое определение CSS подходит
HTML-тегу. Это полностью зависит от
природы тега. В большинстве случаев лег-
ко понять, какое свойство можно приме-
нять к данному тегу, а какое - нет.
Вам же не придет в голову применить свой-
ство, связанное с выделением абзацев, к та-
кому тегу, как <Ь>. В приложении А расска-
зывается, какие свойства можно использо-
вать с определенными типами тегов.
Кроме тега <body> существует три основ-
ных типа HTML-тегов:
теги блок-уровня (block-level tags) вы-
деляют элемент пустой строкой снизу
и сверху. Селекторы тегов этого типа
перечислены в табл. 1.2;
inline-теги не вставляют пустые стро-
ки между элементами. Селекторы те-
гов этого типа перечислены в табл. 1.3;
замененные теги (replaced tags) имеют
установленный или вычисляемый раз-
мер. Селекторььтегов этого типа пере-
числены в табл. 1.4.
| 44 | Введение в CSS
H Netscape 4 не распознает CSS, которые при-
менены напрямую к тегам, перечисленным
в табл. 1.4.
Хотя тег абзаца (<р>) часто используется в
HTML без конечного тега </р>, если вы же-
лаете указать что-либо с помощью CSS, вам
необходимо добавить закрывающий тег.
Хотя тег разрыва (<ь г>) не имеет конечного
тега, вы можете добавить в него стили. Пом-
ните, что в XHTML тег разрыва принимает
форму <Dr /> (с пробелом между Dr и /),
поэтому он закрывается сам.
Таблица 1.3. Селекторы для inline-тегов
Селектор Использование в HTML
а Ссылка
Ь Выделение жирным шрифтом
Dig Текст большего размера
cite Короткая цитата
code Шрифт кода
em Выделение
font Вид шрифта
1 Курсив
pre Переформатированный текст
span Локализованное
форматирование стиля
strike Зачеркивание
strong ’ Усиленный шрифт
sub Подпись снизу
sup Подпись сверху
tt Рукописный шрифт
и Подчеркнутый текст
Таблица 1.4. Селекторы для замененных тегов
Селектор Использование в HTML
img input Изображение Поле ввода
object select Объект Выпадающий список
textarea Многострочное поле ввода
Типы HTML-тегов |~45~|
Кому принадлежат авторские права на CSS
12 января 1999 г. корпорация Microsoft получила патент № 5860073. Этот патент,
озаглавленный «Таблицы стилей для систем публикации», определяет «использо-
вание таблиц стилей в электронных системах публикации». Звучит знакомо?
Изобретатели, перечисленные в данном патенте, создали систему, с помощью ко-
торой «текст или другой элемент, например графическое изображение, появля-
ются на экране». При этом применяются таблицы стилей, определенные как «све-
дения о формате, иапример шрифты и табуляция». Описанный патент частично
совпадает, по-видимому, с понятиями, сформулированными в спецификациях
W3C для CSS и в языке XSL, разработка которого ведется по крайней мере с 1994 г.
Это означает, что корпорация 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.
Поэтому маловероятно, что данный патент выдержит тщательную проверку.
|~46~|
Введение в CSS
Кому принадлежат авторские права на CSS (окончание)
Джордж Олсен (George Olsen) из Web Standards Project выражает сомнение, будет
ли такой патент выпущен, «поскольку существует ряд похожих технологий, кото-
рые появились раньше технологии Microsoft, включая первоначальное предложе-
ние CSS». Также предполагается, что любая организация, имеющая представите-
лей в W3C, в том числе и Microsoft, должна подробно рассказывать о текущих и
будущих патентах, которые могут затронуть рассматриваемые стандарты W3C.
В данном случае это не было сделано. В W3C узнали о патенте 4 февраля 1999 г.,
когда информация о нем появилась в печати.
Какое это имеет к вам отношение? Возможно, никакого. W3C опубликовал CSS как
открытый стандарт, джин уже выпущен из бутылки.
Пока не было ни одного случая, чтобы Microsoft запретила кому-нибудь исполь-
зовать CSS для создания сайта. Все же цель данного открытого стандарта - позво-
лить заинтересованным лицам вносить свой вклад в общее дело, причем это не
должно касаться только одной компании. Будем надеяться, что патент не навредит
будущим CSS-разработкам.
OCUOUI (И
2
Рис. 2.1. Использование CSS на HTML-странице для
добавления картинки на задний план, при этом
текст форматируется, смещается вправо и вниз
_ ВИТШ. '*• 1 О» а « ww Ww..........;СЭ_:
* * < s t6 4 <9;
' Alice s Adventures in Wonderland
: Itwh Carroll
CHATTER I
Domi th» IUbb>t-Holo
Рис. 2.2. Тот же самый код без использования CSS.
Страница просматривается, но форматирование
отсутствует
CSS позволяет контролировать вид доку-
мента. Преимущество CSS перед HTML
заключается в следующем: вместо созда-
ния новых HTML-тегов можно просто
скорректировать определение одного пра-
вила, и вид всех тегов, которые управля-
ются этим правилом, изменится (рис. 2.1
и 2.2).
Если правило расположено в заголовке до-
кумента, то изменения подействуют на
всю страницу. Если оно представляет со-
бой внешний файл, модификации коснут-
ся всех страниц, связанных с этим файлом,
то есть изменится весь сайт. Существуют
браузеры, не распознающие CSS, но их ос-
талось малЬ. К счастью, они просто игно-
рируют код CSS и отображают HTML-
страницу без искажений, но и без форма-
тирования. Возможно, страница не будет
выглядеть так же хорошо, как при исполь-
зовании каскадных таблиц стилей, но она,
по крайней мере, не станет хуже.
Прочитав эту главу, вы узнаете, как созда-
вать CSS и где их размещать для достиже-
ния разнообразных эффектов.
| 48 | Основы CSS
Добавление стилей
в HTML-тег
Хотя CSS обычно не применяется для из-
менения вида каждого тега в отдельности,
вы можете задавать стили для конкретных
тегов. Это особенно полезно, если вы хо-
тите обойти другие установленные на стра-
нице стили.
На рис. 2.3 показан общий синтаксис до-
бавления стиля непосредственно в HTML-
тег, а на рис. 2.4 представлен результат.
Установка стилей для отдельного
HTML-тега
1. <h1 style=
Напишите слово style= в HTML-теге,
который вы хотите определить (лис-
тинг 2.1).
2. "font: small-caps bolditalic 2.5em
->'minion web’. 'Georgia, 'Times New
->Roman',Times, serif; color: red;’1
В кавычках напишите определение сти-
ля в формате property: value, поставь-
те точку с запятой, чтобы отделить раз-
ные определения друг от друга. Убеди-
тесь, что вы закрыли кавычки.
3. >Alice’s Adventures in Wonderland</hl>
После закрывающего тега напишите
тот текст, к которому нужно применить
стиль. Затем закройте парный тег, если
это необходимо.
Знак равенства
Селектор
HTML
Определение
Закрывающий
тег
<h1 style = "color: red;">...</h1>
СТИЛЯ
ю | Содержание
Величина
Рис. 2.3. Общий синтаксис определения стилей
непосредственно в HTML-теге
Рис. 2.4. Стили размещены непосредственно
в теге
Добавление стилей в HTML-тег | 49 |
Листинг 2.1. С помощью атрибутов стиля каждый
тег определяет форматирование текста внутри
него
<html>
<body style=’background:white
->url(alice23.gif) no-repeat;
->font-family:arial,
-Helvetica, geneva, sans-serif; word
->spacing: ipx, position: relative;
->top:l85px. Ieffl65px;
->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 l.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: 3DD%/1OO% 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 игнорируют
многие, особенно позиционные, свойства
внутри тега.
Е Чтобы не возникало проблем с браузером,
рекомендую заключать список определе-
ний в двойные кавычки, а любые значения
в этом списке, например названия шриф-
тов, состоящие из нескольких слов, -
в одинарные.
— Помните, что знак равенства используется
|j для того, чтобы приписать стилю атрибут,
---- а при определении CSS нужно всегда ста-
вить двоеточие.
® Обычные стили можно также применить
ко всей странице (см. следующий раздел)
и к нескольким Web-страницам (см. раз-
дел «Добавление стилей на Web-сайт»
этой главы).
ЕПри использовании со стилем названия
шрифтов, которые состоят более чем из
двух слов, заключаются в одиночные ка-
вычки ().
| 50 | Основы CSS
Добавление стилей
на Web-страницу
В основном CSS используются для опре-
деления стиля всего документа. Для этого
нужно включить правила стиля в заголо-
вок документа, который находится внут-
ри содержания стиля (рис. 2.5).
Если добавить стиль таким способом, то
результат будет идентичен результату до-
бавления стилей непосредственно в тег
(рис. 2.6). Однако этот метод позволяет
легко поменять стили всего документа из
одного места.
Например, если вы будете использовать
тег заголовка первого уровня в нескольких
местах на Web-страиице, вы сможете опре-
делить стиль тегов hi в заголовке вашего
документа. Этот стиль будет применен ко
всем тегам <М> в данном документе.
Теги стиля Определение типа стиля
<style type="text/css">
Ы {color: red;
_</style>
Правило CSS
Рис. 2.5. Общий синтаксис стиля CSS,
расположенного в теге <head> HTML-документа
Рис. 2.6. Этот рисунок совладает с рис. 2,4,
но здесь CSS помещены в теге <head>,
а не в каждом отдельном теге
Добавление стилей на Web-страницу | 51 |
Листинг 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' 190рх;
left: !65px;
width: 480px;
font-family:
->anal, helvetica,geneva,
->sans serif: }
hl {
font:small-caps bold italic
->2.5em 'minion web', 'Georgia',
->'Times New Homan', Times, serif;
color: red;}
h2 {
font: bold 1.5em 'minion web',
->'Georgia', 'Times
->New Roman', Times, serif;
font-size: !.5em }
.dropcap {
font 3OO%/1OO% serif;
color: #999999;
margin-right: -3px; }
</style>
</head>
<body>
<div id= 'content">
<br>
Установка стиля для тегов
в HTML-документе
1. <style type=”text/css>
Напишите открывающий тег <style>
в теге <head > вашего документа, задай-
те тип как "text/css". Это означает,
что все последующие стили будут CSS-
стилями (листинг 2.2).
2. М {
Для определения правила введите се-
лектор нужного тега и открывающую
фигурную скобку за ним. Селектор мо-
жет принадлежать к одному из следую-
щих типов:
- селектор HTML-тега (например, hl;
см. «Переопределение HTML-тега»);
- селектор класса (например, myClass;
см. «Определение классов для созда-
ния тегов»);
- ID-селектор (например, #obj ect; см.
«Определение ID для идентифика-
ции объекта»);
- группа селекторов, разделенных за-
пятой, то есть список определений
(например, hi, h2, myClass; см. «Оп-
ределение стилей с одинаковыми
правилами»);
- группа селекторов, разделенных
пробелами, то есть контекстуальные
определения (например, hi myclass
object; см. «Определение стилей в
контексте»).
3. font: small-caps bold italic 2.5em
->'Tinion web’, ’Georgia’, ’Times New
->Roman', Times, serif; color: red;
Напишите определения, которые нуж-
но присвоить этому правилу в виде
property: value и разделите различные
определения в списке точкой с запятой.
I 52 | Основы CSS
4. Закройте правило фигурной скобкой ()).
5. Повторите шаги 2-4 для всех селекто-
ров, которые требуется определить.
6. Закройте тег стиля, напечатав </style>.
I I На первый взгляд кажется, что включать
typea"text/css" необязательно, так как
'---1 браузер должен уметь определять тип сти-
ля. Однако стоит записывать эту часть
кода, чтобы браузеры, не поддерживаю-
щие данный тип стиля, могли проигнори-
ровать его. Кроме того, любой человек мо-
жет прочитать код и узнать, какой исполь-
зуется стиль.
I Л I Рекомендуется применять тег комментариев
| U 1 чтобы спрятать CSS от браузе-
1---1 ров, их не распознающих. Иначе эти брау-
зеры покажут таблицу стилей не в лучшем
виде.
Е Стили можно также применять непосред-
ственно к одному тегу (см. «Добавление
стилей в HTML-тег») или к нескольким
Web-страницам (см. «Добавление стилей
на Web-сайт»), Однако зто может привести
к проблемам, если вы используете XHTML.
Листинг 2.2 (окончание)
<h1>Alice's Adventures in
->Wonderland</h1>
<h2>Lewis Carroll</h2>
<p style="style: italic;
->font-family: monospace:”>
->THE MILLENIUM FULSCAEEN
->EDITIDN 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>
Добавление стилей на Web-сайт | 53 |
Добавление стилей
на Web-сайт
Преимущество CSS заключается в том,
что их допустимо использовать не толь-
ко в одном документе, но и на всем сайте
в целом. Внешние таблицы стилей мож-
но применить к сотне HTML-докумен-
тов, и для этого не потребуется никакого
дополнительного программного кода.
Создание внешнего CSS-файла состоит из
двух этапов. Сначала в текстовом файле ус-
танавливаются правила. Затем он импорти-
руется или связывается с HTML-докумен-
том при помощи операции ©import и/или
тега <link> соответственно (рис. 2.7). Свя-
занные или импортированные CSS-файлы
Рис. 2.7. Внешние CSS-файлы разрешается не только использовать во множественных
HTML-документах, как в случае с CSS2, их можно также импортировать (но не связывать)
в другой CSS-файл, как в случае с CSS3
| 54 | Основы CSS
Создание внешней таблицы стилей
Первый шаг при использовании внешней
таблицы стилей на Web-сайте состоит в
том, чтобы создать текстовый файл, кото-
рый включает весь CSS-код. Однако в от-
личие от встроенных стилей вы ие долж-
ны использовать теги < st у 1 е> во внешнем
CSS-файле. Если вы это сделаете, данный
файл не будет работать с большинством
браузеров.
Создание внешнего CSS-файла:
1. Создайте новый файл с помощью тек-
стового процессора или любой другой
программы, которая позволяет созда-
вать текстовые файлы. Например, мож-
но использовать Notepad или SimpleText
(листинг 2.3).
Во внешнем CSS-файле нельзя приме-
нять тег <style>, иначе такая таблица
не будет функционировать во многих
браузерах.
2. hi (
Добавьте на страницу правило CSS, на-
писав селектор для определяемого тега
и открывающую фигурную скобку. Се-
лектор может принадлежать к одному
из следующих типов:
- селектор HTML-тега (например, hi;
см. «Переопределение HTML-тега»);
- селектор класса (например, myClass;
см. «Определение классов для созда-
ния тегов»);
- ID-селектор (например, flobject;
см. «Определение ID для иденти-
фикации объекта»);
- группа селекторов, разделенных за-
пятой, то есть список определений
(например, hi, h2,myClass;см. «Опре-
деление стилей с одинаковыми пра-
вилами»);
Листинг 2.3. Внешний CSS-файл default.css
содержит определения, которые будут
Использоваться для создания макета страницы
в листингах 2.5 и 2.6
body {
background: white иrl(alice23.gif)
->no-repeat;
word-spacing: Ipx;
}
«content {
font-family: arial, Helvetica, geneva,
->sans-serif;
position: relative;
top: 190px:
left: 165px;
width: 480px;
dropCap {
font: 3OO%/1OO% serif;
color: #999999;
margin-right: -3px;
ЕХотя внешний CSS-файл может иметь лю-
бой HTML-код, лучше всего использовать
имя, которое поможет вам впоследствии
понять, для чего нужны данные стили. На-
пример, имя «navigation.css», скорее все-
го, является более информативным, чем
«sstcss».
। л । CSS-файл не должен включать HTML-
w теги (особенно тег <style>) или другое
’----* содержание, за исключением коммента-
риев и импортированных стилей.
ЕВам необязательно использовать расшире-
ние .css с CSS-файлами. Вы можете про-
сто назвать файл «default», и он будет ра-
ботать. Добавив расширение, вы иногда
можете избежать путаницы.
Добавление стилей на Web-сайт | 55 |
Листинг 2.4. Внешний CSS-файл headers.css
содержит дополнительные определения, которые
служат для создания макета страницы
влистингах 2.5 и 2.6. Вы можете назвать эти
файлы любым именем, headers здесь приводится
в качестве примера
М {
color: red; font: italic small-caps
->bold 2 5em 'minion web’, Georgia.
-> ‘Times New Roman’, Times, serif;
}
h2 {
font: bold 1.5em ‘minion web', Georgia,
-> 'Times New Roman', Times, serif;
- группа селекторов, разделенных
пробелами, то есть контекстуаль-
ные определения (например, hi
myclass object; см. «Определение
стилей в контексте»).
Заметьте, что в данном случае тег
<style> не используется. Если бы он
присутствовал в коде, HTML-документ
не стал бы работать.
3. font:small-caps bold italic 2.5em
->’minion web’, ’Georgia’, 'Times New
->Roman’, Times, serif; color: red;)
Напишите определения, которые нужно
присвоить правилу в виде property :value,
и поставьте точку с запятой, чтобы разде-
лить различные определения в списке.
4. Закройте правило фигурной скобкой
(».
5. Повторите шаги 2-4 для всех селекто-
ров, которые требуется задать.
6. Сохраните документ как default.css,
где «default» - это любое имя файла, а
«.css» - это расширение, которое позво-
ляет идентифицировать тип файла. Вы
можете создать столько ссылок на внеш-
ние CSS-файлы, сколько считаете нуж-
ным (листинг 2.4). В этом примере мы
создали еще один внешний CSS-файл с
именем «headers.css», который будет
включать определения hl и h2.
7. Прикрепите файл к HTML-файлу с по-
мощью тега <1 in k> либо к HTML-фай-
лу или CSS-файлу с помощью тега
©import.
| 56 | Основы CSS
Создание ссылки
на таблицу стилей
Определяет ссылку
на таблицу стилей URL внешнего файла
Внешние файлы таблиц стилей могут
использоваться с любым HTML-файлом
посредством тега <link>. Создание ссыл-
ки на CSS-файл влияет на документ: сти-
ли будут печататься напрямую вверху
документа. На рис. 2.8 показана общая
структура связанных таблиц стилей, а на
рис. 2.9 - результаты создания ссылки на
таблицу стилей.
-clink rel=*stylesheet” href="filename.css">
Рис. 2.8. Общая структура ссылки на внешнюю
таблицу стилей
Рис. 2.9. Страница может выглядеть точно так,
как показано на рис. 2.4 и 2.6. Несмотря на это,
CSS-файл, который использовался
для создания страницы, расположен
во внешних файлах, связанных ссылками
Добавление стилей на Web-сайт | 57 |
Листинг 2.5. Большинство примененных в этом
документе стилей определены во внешних CSS-
файлах default.css и headers.css, представленных
в листингах 2.3 и 2.4. Исключение составляет тег
<body>, который задается локально. Он помещает
на задний план картинку (рис. 2.9)
<html>
<fiead>
<link rel="stylesheet" href=''default.css">
clink rel=''stylesheet” href="headers.css”>
<style type="text/css” media=”screen”><! -
body {
background: white url(alice23.gif)
->no-repeat;
</style>
k/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 FULCRUM
->EDITI0N 3.0</p>
<h2>CHAPTER I<br>
Down the Rabbit-Hole</h2>
<p><span class=’’dropCap”>A</span> lice
- >was beginning to get very tired of
- >sitting by her sister on the
- >bank...</p>
<p>So sne was considering in her own
->mind...</p>
<p>There was nothing so <i>very</i>
->remarkable in that...</p>
</div>
</body>
</html>
Создание ссылки
на внешний CSS-файл
1. <link>
Внутри тега <head>... </head> в HTML-
документе откройте тег <1 ink>, а после
него введите пробел (листинг 2.5).
2. rel="stylesheet"
Эта запись сообщает браузеру, что далее
встретится ссылка на таблицу стилей.
3. href="default.css"
Укажите путь, глобальный или локаль-
ный, к тому CSS-файлу, на который тре-
буется создать ссылку. Здесь filename -
полный путь и имя (включая расшире-
ние) вашего CSS-документа.
4. >
Закройте тег <1 ink> с помощью закры-
вающей угловой скобки.
5. <link rel="stylesheet” href=
->”headers.css”>
Повторите шаги 1—4 столько раз, сколь-
ко таблиц стилей вам понадобится.
6. <styie type="text/css”>. • .</style>
Используя тег <style>, добавьте в заго-
ловок любые стили. Тег <style> мож-
но расположить и перед тегом <link>.
| 58 | Основы CSS
Импорт таблицы стилей
Другой способ добавления внешних таб-
лиц стилей в документ заключается в том,
чтобы использовать команду ©import.
Преимущество импорта состоит в том, что
с его помощью вы можете не только помес-
тить внешний CSS-файл в файл HTML-
документа, но и поместить один внешний
CSS-файл в другой. На рис. 2.10 показана
общая структура команды ©import, а на
рис. 2.11 - результат импорта таблицы
стилей.
URL внешнего файла
©import url(filename.css);
Рис. 2.10. Общий синтаксис импортирования
внешней таблицы стилей
Рис. 2.11. Для создания этой страницы
используются те же CSS-файлы, что и для
страницы на рис. 2.9, но в данном случае файлы
импортированы, а в теге <body> определено
другое изображение
Добавление стилей на Web-сайт | 59 |
L. Лжстииг 2.6. Для импортирования CSS-файла
i в HTML-документ используется операция ©import
место тега <11пк>. Конечный результат тот же,
j хотя опарация импорта не поддерживается
' Netscape 4
..... Листинг^
р <head>
<style type="text/css" media=”screen”><! -
J. ©import url(default.css);
©import url(headers.css);
i. body {
background: white url(alice40.gif)
->no-repeat;
}
t ->
</style>
• </head>
<body>
<div id=”content">
<br>
<h2>CHAPTER XI<br>
Who Stole the Tarts?</h2>
<p><span classed ropCap”>T</span>he
->King and Queen of Hearts were seated
->on their throne when they
->arrived . .</p>
<p>Alice had never been in a court of
-justice before, but she had read
->about them in books, and she was
~>quite pleased to find that she knew
->the name of nearly everything there.
->’That's the judge,’ she said to
->herself, 'because of his great
->wig.’</p>
<p>The judge, by the way, was the
->King.. </p>
<p>’And that's the jury-box,’ thought
->Alice, 'and those twelve
->creatures,'. .</p>
</div>
</body>
</html>
Импортирование внешнего
CSS-файла
1. <style type=”text/css”>
В заголовке HTML-документа открой-
те тег <style> (листинг 2.6).
2. @import иrl(default.css);
Импортируйте CSS-файл. Имя файла -
это URL используемого CSS-документа.
URL может быть глобальным и начи-
наться с http:// или локальным, указы-
вающим на файл, который находится
на том же компьютере.
3. ©import url(headers.css);
Повторите шаг 2 для всех внешних CSS-
документов, которые требуется импор-
тировать.
4. body { background: white
->url(alice40.gif) no-repeat;}
Здесь вы можете добавлять дополни-
тельные CSS-правила, если это необхо-
димо (см. предыдущий раздел).
5. </style>
Закройте тег стиля.
I _ I Тег <link> можно поместить непосред-
ственно во внешней таблице стилей. Тогда
'--1 импортированный файл будет включен в
документ как часть внешнего CSS-файла.
I л I Поскольку Netscape 4 не поддерживает
операцию импорта, предпочтительней ис-
1--* 1 пользовать тег <link>. Однако директива
©import вполне применима для Netscape 6.
ЕВы можете назвать внешний CSS-файл лк>-
бым именем, однако рекомендуется, чтобы
оно имело отношение к стилям, описанным
в файле. Например, имя navigation.css ска-
жет о содержании файла больше, чем
CSS1.CSS.
| 60 | Основы CSS
® CSS-файл не должен содержать HTML-теги
(даже тег <style>) или другую информа-
цию, кроме комментариев и импортирован-
ных стилей.
I Л I При работе с CSS-файлами необязательно
использовать расширение .css. Вы можете
'----1 назвать файл просто filename, на его функ-
ционировании отсутствие расширения не
отразится. Но все же лучше добавлять рас-
ширения, чтобы избежать путаницы.
ЕЕсли при работе с Netscape 4 документ пе-
резагружается из кэша, то таблицы стилей
могут исчезнуть.
I I Также вы можете поместить команду
(J ^import напрямую в другую внешнюю
'----1 таблицу стилей, чтобы импортировать
одну таблицу в другую. Импортирован-
ный файл будет включен как часть внеш-
него CSS-файла. ;
Переопределение
HTML-тега
У многих HTML-тегов уже есть встроен-
ные определения, например у тега <bold>.
Его встроенное свойство эквивалентно
font-weight:bold.
На рис. 2.12 представлен общий синтак-
сис полного CSS-правила с использовани-
ем HTML-селектора.
Добавляя определения в b - селектор тега
<Ь>, - вы можете изменять действие этого
парного тега на его содержимое (рис. 2.13).
HTML-селекторы можно определять внут-
ри тега <style>... </style> в заголовке до-
кумента (см. раздел «Добавление стилей на
Web-страницу» ранее в этой главе) или во
внешнем CSS-файле, который потом им-
портируется или связывается с HTML-до-
кументом (см. раздел «Добавление стилей
на Web-сайт»).
0Q0 0НТМ1 to. ibt WMV 1 МЮсЭ’Шф HTML .. СЗ
♦ «й» > Т X «
Рис. 2.12. Некоторые HTML-теги были
переопределены. Тег <р> теперь применяет
к тексту следующий стиль: серый цвет, шрифт
Verdana, размер 12 пунктов, полуторный интервал
между строками. Кроме того, картинки
выравниваются по правому краю, то есть
изменился тег <img>, а тег <1> придает шрифту
полужирное начертание
HTML-
селектор Свойство Величина
гЧ I--------I I “L-—I
р {font-size: 12рх;}
1-----------।-----------1
Определение
Рис. 2.13. Общий синтаксис для определения
стилей в HTML-теге
Переопределение HTML-тега | 61 ~|
Листинг 2.7. Обычно тег <р> просто оставляет
пустые строки между абзацами. После добавления
нескольких стилей этот тег меняет цвет текста,
шрифт, которым он набран, и размер шрифта, по-
прежнему оставляя пустые строки (рис. 2.12)
Листика.:
<html>
<head>
<style type= 'text/css">
P {
color: #666666
font-size: 12px:
line-height: 18рх;
font-family: Verdana, Arial,
^Helvetica, Geneva, sans-serif; }
img { float: right: }
i { font-weight: hold: }
</style>
</head>
<body>
<div align="leff>
<h3>CHAPTER 5<Dr>
Advice from a Caterpillar</h3>
</div>
cpximg scr="alicel5.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>9' said the
^Caterpillar.</p>
</body>
</html>
Определение HTML-селектора
i. p <
Начните c HTML-селектора, свойства
которого требуется определить, и до-
бавьте открывающую круглую скобку,
чтобы открыть правило (листинг 2.7).
2. color: #666666
font-size: 12рх;
line-height: 18рх;
font-family: Verdana, Arial,
Helvetica, ->Geneva, sans-serif;
Напишите определения свойств. Допус-
кается добавлять столько определений,
сколько потребуется, однако эти свой-
ства должны работать с рассматривае-
мым HTML-тегом. Например, нельзя ис-
пользовать текстовый отступ для описа-
ния тега <bold>. В приложении А сказано,
какие свойства можно использовать для
переопределения конкретных тегов.
3. }
Список определений должен завершать-
ся закрывающей фигурной скобкой.
Если ее не поставить, можно испортить
всю работу.
“ZZH Переопределение тега автоматически пере-
ll носится на все аналогичные теги, которые
---- встретятся в дальнейшем.
“ZZ“I Синтаксис слегка отличается от синтаксиса
Q для переопределения отдельного HTML-тега
---- в документе (см. раздел «Добавление сти-
лей в HTML-тег»}.
| л I Переопределение тега не влияет на его лер-
(j воначальные свойства. Следовательно, тег
1---* 1 <ь> независимо от внесенных изменений
будет придавать шрифту полужирное на-
чертание (см. «Управление существующими
или наследованными значениями свойств»}.
| 62 | Основы CSS
। _ । Таким способом можно переопределить
I I и тег <body>. Теоретически он действует как
।1 тег блок-уровня (см. раздел «Типы HTML-
тегов» в главе 1), однако Internet Explorer
для Windows не распознает позиционирова-
ние в данном теге.
Если вы хотите позиционировать все объ-
екты на странице, нужно делать это на
уровне CSS.
Определение классов
для создания тегов
Использование селектора класса позволя-
ет устанавливать независимые стили, ко-
торые потом можно применять к любому
HTML-тегу.
На рис. 2.14 и 2.15 представлен общий
синтаксис CSS-правила класса.
HTML-селектор отличается от класса тем,
что ои автоматически определяет конкрет-
ный тип тега, а классу дается уникальное
имя, которое потом указывается в HTML-
теге или тегах, используемых с атрибутом
стиля (рис. 2.16).
Правила класса можно определять внут-
ри тега <style>. . . </style> в заголовке
документа (см. раздел «Добавление сти-
лей на Web-страницу» ранее в этой гла-
ве) или во внешнем CSS-файле, который
затем импортируется в HTML-документ
или связывается с ним при помощи ссыл-
ки (см. выше раздел «Добавление стилей
на Web-сайт»).
Селектор
класса Свойство Величина
I --1 —I I--------------1 I I
.сору {font-size: 12рх;}
Определение
Рис. 2.14. Общий синтаксис CSS-класса
HTML- Селектор
селектор класса Свойство Величина
Определение
Рис. 2.15. Общий синтаксис эалисимого класса.
Определения для этой версии сору будут работать
только в том случае, если их применить к тегу
<blockquote>
Рис. 2.16. Класс сору применен ко всем тегам
<р>. Текст печатается шрифтом Trebuchet MS
12 пунктов с полуторным интервалом между
строками. Тег <blockquote> распознает сору как
зависимый класс, текст печатается полужирным
шрифтом Book Antiqua 14 пунктов, высота
строки меньше, текст выровнен по центру
Определение классов для создания тегов |~ 63~|
(Листинг 2.8. Стиль класса можно устанавливать
j И применять с любым HTML-тегом, как в случае
' ссору, либо только с одним тегом, как в случае
: С blockquote. сору
ЛИСТИНГ
j <html>
L <head>
’ «style type="text/css” rnedia=’'screen"><!-
I -copy {
font-size: 12рх;
i lins-heiflht: 150X;
1 font-family: ‘Book Antique’,
r. ->’Times New Roman’, Georgia,
->Times, serif;
}
blockquote.copy {
; font-weight: bold;
? font-size: I4px;
line-height 16px;
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, ’
->said the Duchess . </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>
«/blockquote>
</body>
</html>
Определение селектора класса
1. .copy {
Введите имя класса с предваряющей
его точкой (.), затем откройте опреде-
ление с помощью фигурной скобки
({). Имя класса может быть любым,
но оно должно содержать только бук-
вы и цифры.
Поскольку класс сору независимый, его
можно использовать с любым HTML-
тегом, однако установленные для класса
свойства должны поддерживаться ти-
пом применяемого тега (листинг 2.8).
2. font-size: 12рх;
line-height: 150%;
font-family: “Trebuchet MS”, Arial,
->Helvetica, Geneva, sans-serif;
Напишите определения этого класса
и убедитесь, что они разделены точкой
с запятой.
3. }
Завершите правило закрывающей фи-
гурной скобкой.
Класс, не определенный внутри HTML-
тега документа, не будет работать.
| 64 | Основы CSS
Применение класса к HTML-тегу
1. <р class='сору">...</р>
Добавьте class=”classname" в тег, к ко-
торому вы хотите применить класс. За-
меть! е, что хотя при определении
класса внутри <style>... </sty 1е> вы и
пишете точку, она не используется при
ссылке на имя класса в теге.
I ц 1 Внутри HTML-тега можно сочетать класс
I U I с ID или inline-правилами (см. разделы
1---1 «Добавление стилей в HTML-тег» и «Опре-
деление ID для идентификации объекта»}.
®В качестве имени класса нельзя использо-
вать зарезервированные слова JavaScript.
Эти слова перечислены в приложении В.
i Л I Для создания собственных HTML-тегов
Q удобны классы с тегами <div> и <span>.
Зависимые классы
Если класс непосредственно связан
с HTML-тегом, такой класс называют
зависимым. Это означает, что данный
класс можно использовать только вме-
сте с данным HTML-тегом. На рис. 2.15
представлен синтаксис зависимого
класса.
Зачем привязывать класс к одному
конкретному тегу? С помощью зави-
симого класса можно добавлять су-
ществующие определения класса,
которые будут работать только в том
случае, если класс находится в конк-
ретном теге. Например, вы хотите,
чтобы класс сору в общем случае
придавал шрифту требуемый раз-
мер, но если этот класс находится
внутри тега <blockquote>, можно сде-
лать так, что кроме увеличения раз-
мера он будет придавать тексту по-
лужирное начертание.
Определение ID для идентификации объекта | 65 |
40 селектор Свойство Величина
---------1 I------------1 I I
farea 1 {font-size: 12рх;}
1-----------1----------* 1
Определение
нс. 2.17. Общий синтаксис ID
МВ. В результате установки левого поля слой
I сдвинут вправо, а текст обтекает слой
Определение ID
для идентификации
объекта
Как и селектор класса, ID-селектор можно
использовать для создания уникальных, не-
зависимых от конкретного HTML-тега сти-
лей. Таким образом, их легко приписать
любому применяемому тегу. На рис. 2.17
представлен общий синтаксис ID.
ID - основное понятие динамического
HTML (DHTML). С помощью ID функция
JavaScript определяет уникальный объект
на экране. Это означает, что в отличие от
класса ID обычно используется на страни-
це один раз и определяет один элемент как
объект. Этим объектом затем можно уп-
равлять с помощью JavaScript (рис. 2.18).
ID допускается определять внутри тега
<sty 1е>... </style> в заголовке документа
(см. раздел «Добавление стилей на Web-
страницу» ранее в этой главе) или во внеш-
нем CSS-файле, который затем импортиру-
ется в HTML-документ или связывается с
ним при помощи ссылки (см. выше раздел
«Добавление стилей на Web-сайт»).
Дж К.
| 66 | Основы CSS
Чтобы определить ID, нужно выполнить
следующие действия:
1. йагеа1 (
ID-правила всегда начинаются со зна-
ка решетки (#), затем вводится имя
ID. В качестве имени можно использо-
вать любой набор букв и цифр (лис-
тинг 2.9).
2. color: red: margin-left: 9em; position:
->relative;
Через точку с запятой напишите опре-
деления этого класса.
ID можно использовать с любым ти-
пом свойств, но ID-селектор лучше
всего применять при описании уни-
кального объекта на экране.
3. }
Закройте правило с помощью фигур-
ной скобки (}).
ID, не определенный внутри HTML-тега
документа, не будет работать.
Элементы или объекты?
Часто при обсуждении Web-страниц
термины «элемент» и «объект» пута-
ют друг с другом. Если говорить про-
сто, элемент создается с помощью от-
крывающих и закрывающих тегов
разметки. Например, теги <р>...</р> и
все содержимое между ними (даже
другие теги) формируют элемент. Все
теги в элементе называются подчи-
ненными, а окружающие теги - роди-
тельскими.
С другой стороны, объект создается
тогда, когда элементу присваивается
уникальный идентификатор ID, кото-
рый дает браузеру доступ к свойствам
данного элемента.
За дополнительной информацией по
элементам обращайтесь к разделу
«Поле элемента» в главе 5, а за допол-
нительной информацией по объек-
там - к главе 10 «Объектная модель
1документа и события».
Определение ID для идентификации объекта | 67
Листинг 2.9. ID area! определяет границы
изменяемой области в HTML-документе
(рис. 2.18)
Листинг . - .....•...- .я]
<html>
<head>
<style type="text/css">
la real {
color: red;
margin-left: 9em;
position: relative; }
Simagei {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 ld=’’area1"><img id=”imagei"
->scr="alice06.gif"
->width="163" height="2OO"
->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>
</htinl>
Применение ID к HTML-тегу
1. <p id=''area1">.. .</p>
Добавьте id = "idName" в выбранный
HTML-тег (листинг 2.9). Как объясня-
лось ранее в этой главе, величина ID-
атрибута является именем созданного
вами ID-селектора. Заметьте, что хотя
при определении ID вы и вводите сим-
вол решетки (#), она не используется
при ссылке на ID в HTML-теге.
Внутри HTML-тега можно сочетать ID с
inline-правилами или правилами класса
(см. разделы «Добавление стилей в HTML-
тег» и «Определение ID для идентифика-
ции объекта»}.
Мы показали еам, как следует настроить
описание для ID, но это не значит, что вы
должны настраивать описание, чтобы доба-
вить ID для тега и использовать его в каче-
стве объекта в DHTML.
| 68 | Основы CSS
Определение стилей
с одинаковыми правилами
Если требуется, чтобы несколько селекто-
ров имели одинаковое определение, запи-
шите эти селекторы через запятую. Об-
щий синтаксис для группы определений
представлен на рис. 2.19.
В списке можно определить качества, а за-
тем добавить правила для каждого HTML-
тега отдельно (рис. 2.20).
CSS допустимо определять внутри тега
<stу 1е> . </stу 1е> в заголовке докумен-
та (см. раздел «Добавление стилей на Web-
страницу») или во внешнем CSS-файле,
который затем импортируется в HTML-
документ либо связывается с ним (см. раз-
дел «Добавление стилей на Web-сайт»).
Запятая разделяет
селекторы Свойство Величина
,-------'------1 (------1-----!
h1,h2,h3,p {font-size: 12рх;}
Определение
Рис. 2.19. Общий синтаксис для списка селекторов
с одним и тем же определением
Рис. 2.20. Заголовки и абзацы напечатаны одним и
тем же шрифтом и имеют одинаковые поля
Определение стилей с одинаковыми правилами | 69
Листинг 2.10. Определив для нескольких
селекторов одно и то же правило, вы уменьшите
время загрузки страницы (рис. 2.22}
<hrml>
<head>
<styie type="text/css">
h1,h2,h3.p {
font-family: "Book Antiqua",
-> "Times New roman", Georgia,
-> Times, serif;
margin-left: Юрх;
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
-X/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. hi,h2,h3, p{...}
Напишите несколько HTML-селекто-
ров через запятую (листинг 2.10). Та-
ким образом, у них будет одно и то же
определение.
2. ИЗ {...}
При необходимости определение каж-
дого селектора можно поменять. Если
вы хотите перекрыть набор определе-
ний в группе правил, убедитесь, что в
CSS эти правила идут после группы пра-
вил (см. раздел «Определение каскадно-
го порядка»).
I I В списке можно также определять ID и клас-
I U I сы: hi, h2,. dropcap{...
I a l Группировка селекторов таким способом
(j поможет вам сэкономить время и избе-
---- жать повторов, но будьте осторожны: из-
менив значение любого свойства в опре-
делении, вы измените его для каждого
тега в списке.
| 70 | Основы CSS
Определение стилей
в контексте
Если один тег окружен другими, такая
комбинация называется набором тегов.
Здесь внешний тег называется родитель-
ским (parent), а внутренний - дочерним
(child). Чтобы создать правило для тега,
являющегося внутренним, можно ис-
пользовать CSS.
На рис. 2.21 представлен общий синтак-
сис для контекстуальных селекторов.
В примере (листинг 2.11) тег <link> пере-
определен таким образом, что он функ-
ционирует по-разному в зависимости от
того, где находится, - в теге <р> или в теге
<div> (рис. 2.22).
Пробелы разделяют
селекторы Свойство Величина
I---1---1 I-------1-----1 г—^-1
ul li b {font-size: 12рх;}
'------------।---------'
Определение
Рис. 2.21. Общий синтаксис контекстуального
правила
............................. е .
Рис. 222. Во всех ссылках используется тег <а>.
Но на странице представлены два разных стиля,
которые появляются в зависимости от
расположения тега <link>
Определение стилей в контексте [ 71 |
Листинг 2.11. Контекстные CSS позволяют
устанавливать стили HTML-тегов в зависимости
от их родительских характеристик. В этом
примере для тега < 1 inк> созданы два стиля. Один
используется внутри абзаца, другой - если ссылка
находится внутри тега <div> с классом menu
<head>
<style type="text/css">
p a:link {
color: red;
text-decoration: underline; }
div.menu a:link {
color: #900,
font-weight, bold;
text-decoration: none; }
div.menu { font: bold 16px "Trebuchet
->MS", Anal, Helvetica. Geneva,
->sans-senf; }
p { font: i2px "Book Antioua". "Times
->New Roman", Georgia, Times, serif; }
</style>
</head>
<body>
<div class= 'menu">
<a href="#">< Previous Chapter</a> I -
><a href="#">Next Chapter ></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>
Создание контекстуального
селектора
1. p a: link {...}
div.menu a;link {...}
Введите HTML-селектор родительско-
го тега, затем нажмите клавишу пробе-
ла. Вы можете написать столько HTML-
селекторов, сколько потребуется. Но
именно последний селектор будет обла-
дать всеми стилями, перечисленными в
правиле.
2. <div class=’'menu"xa href="#">... </а>
-хрха href="#">.. .</а></р>
Ссылка выделяется ярко-красным цве-
том только в том случае, если находит-
ся внутри абзаца. Ссылка отмечается
малиновым цветом и не подчеркивает-
ся, если располагается в теге <div> с ука-
занным классом menu.
। I Как и в случав с группой селекторов, в спи-
I (j I сок контекстуальных селекторов наряду
'---1 с HTML-селекторами допускается включать
селекторы классов (зависимых или незави-
симых) и/или ID-селекторы.
| 72 | Основы CSS
Другие группировки селекторов
CSS также допускает другие типы группировок селекторов, что позволяет увели-
чить степень разделения селекторов по типам (важно при назначении порядка кас-
кадирования, как мы расскажем далее в этой главе). К сожалению, различные сти-
ли не поддерживаются Internet Explorer для Windows (хотя они работают в Internet
Explorer для Мас).
Если вы выполняете кодировку для Netscape 6, Mozilla 1, Opera 6, Safari 1 или более
поздних версий, группировки могут существенно увеличить функциональность
ваших таблиц стилей.
Определение подчиненных/родительских тегов: подчиненные/родительские селек-
торы служат для определения контекстуальных стилей. Они позволяют вам задать
стиль только при условии, что тег является прямым и подчиненным (но не «вну-
ком») тега. Базовая структура выглядит так:
<div>em { font-family:times; }
В этом примере только теги с <ет>, напрямую связанные с тегом <div>, будут ис-
пользовать шрифт times. Если тег <ет> находится в теге абзаца внутри тега div, он
останется неизменным.
Определение атрибутов соседних тегов: эта группировка (известная как соседний
селектор) позволяет вам определить стиль для первого (и только для первого) по-
вторения тега после другого тега.
hl + р { font-family:times; }
В этом примере первый тег абзаца <р> после тега заголовка первого уровня <hd>
будет использовать шрифт times.
Определение ссылок стилей с псевдоклассами | 73 |
Листинг 2.12. Четыре псеадокласса,
определяющие стиль ссылки: ссылка, посещенная
ссылка, свободная ссылка и активная ссылка
Листинг л СЭ-|
<html>
<head>
<style type=”text/css” media="screen”><!-
a:link {
color:#cc0000;
font-weight.bold:
}
a:visited {
color:Й990000;
text-decoration:none;
font-weight:normal;
}
a:hover {
text-deco ration:none;
color:#ffOOOO;
cursor:nw-resize;
}
a:active {
color:tt990000;
background-color:off0000;
text-deco rat ion:none;
}
-></style>
</head>
<body>
<h3>CHAPTER XI<br>
Who Stole the Tarts?</h3>
<pxa href="index. html">Ttie King</a> and
-><a href=,’a">Queen of Hearts</a> were
->seated on their throne when they arrived,
->with a great crowd assembled about them-
->all sorts of little birds and beasts,
->as well as the whole pack of cards: the
-><a href=''a"»<nave</a> was standing
~>before them, in chains, with a soldier
->on each side to guard him; and near the
->King was the <a href="o”>White Rabbit</
->a>, with a trumpet in one hand, and a
->scroll of parchment in the other. In
->the very middle of the court was a table,
->with a large dish of tarts upon it:
->they looked so good, that it made Alice
->QUite hungry to look at them-’I wish
Определение ссылок
стилей с псевдоклассами
Большинство браузеров позволяют вам за-
давать цвет ссылок для различных состоя-
ний (ссылка, посещенная ссылка и активная
ссылка) в теге <body> документа. При помо-
щи CSS вы можете указать не только цвет,
но и другие CSS-свойства для ссылок.
Хотя ссылка представляет собой тег (<а>), ее
индивидуальные атрибуты не являются те-
гами. Чтобы задать эти свойства, вам при-
дется использовать псевдоклассы, связан-
ные с состояниями, которыми может обла-
дать ссылка: ссылка, посещенная ссыл-
ка, свободная ссылка и активная ссылка
(листинг 2.12). За дополнительной инфор-
мацией по псевдоклассам обращайтесь к
примечанию «Не совсем класс» и табл. 2.1.
Листинг 2.12 (окончание)
вое . Листинг^.
->they’d get the trial done,' she thought.
->‘and hand round the refreshments!' But
->there seemed to be no chance of this, so
->she began looking at everything about
->her, to pass away the time.</p>
</body>
</html>
| 74 | Основы CSS
Настройка контрастного
внешнего вида ссылок
1. a:link {...}
Псевдокласс link позволяет вам опре-
делить внешний вид гиперссылок, ко-
торые еще не были выбраны (рис. 2.23).
2. a:visited
Псевдокласс visited позволяет вам оп-
ределить внешний вид ссылок, кото-
рые уже были выбраны пользователем
(рис. 2.24).
3. a:hover {...}
Псевдокласс hover позволяет вам опре-
делить внешний вид ссылок, на которых
расположен курсор мыши (рис. 2.25).
4. a:active {...}
Псевдокласс active позволяет вам опре-
делить внешний вид ссылки, по кото-
рой щелкнул пользователь (рис. 2.26).
Queen of Hearts
Рис. 2.23. Это стиль гиперссылки
(псевдокласс link)
Queen of Hearts
Рис. 2.24. Это стиль гиперссылки, которую уже
выбирал пользователь (псевдокласс visited)
Queen of Hearts
Рис. 2.25. Это стиль гиперссылки-, на которой
находится курсор мыши (псевдокласс hover)
Рис. 226. Это стиль гиперссылки, по которой
только что щелкнул пользователь (псевдокласс
active)
Таблица 2.1. Псевдоклассы
Псевдокласс Описание Совместимость
ractive По элементу щелкнули IE4, N6, 03-5, CSS1, S1
:first-child Первый подчиненный элемент
для другого элемента IE5*, N6, 07, CSS2, S1
:focus Элемент, который имеет фокус на экране IE5*, N6, 07, CSS2, S1
rhover На элемент наведен курсор мыши IE4, N6, 03-5, CSSl, S1
dink Элемент, который не был посещен IE4, N6, 03-5, CSSl, S1
ivisited Элемент, который был посещен IE4, N6, 03-5, CSS1, S1
* Только для Мас; не поддерживается Windows
Определение ссылок стилей с псевдоклассами | 75 |
№ совсем класс
Поддерживающие CSS браузеры ав-
томатически распознают определен-
ные классы, которые носят название
псевдоклассы. Псевдоклассы пред-
ставляют собой теги с уникальными
атрибутами, которые можно опреде-
лять по отдельности. Например, тег
<а> включает несколько состояний
ссылок:active, visited, hover и link
(задается по умолчанию). Вы можете
задавать эти псевдоклассы по отдель-
ности, как если бы они были HTML-
селекторами.
Помимо псевдоклассов ссылок, кото-
рые поддерживаются всеми браузе-
рами, и псевдоклассов :first-child и
.focus, которые поддерживаются
Netscape, CSS включает некоторые дру-
гие псевдоклассы, которые не поддер-
живаются Netscape или Internet Explorer
(:first, :lang, -.left, : right). Эти
псевдоклассы используются для под-
держки адресов отдельных страниц при
печати Web-страницы.
I Л I Порядок, в котором задаются стили, имеет
значение для определенных браузеров. На-
'----1 пример, если в Internet Explorer 5 для
Windows поместить псевдокласс hover
перед псевдоклассом visited, то псевдо-
класс hover не будет работать после посе-
щения ссылки. Благодаря каскадному по-
рядку (см. раздел «Определение каскадного
порядка» далее в этой главе) псевдокласс
active определяется после псевдокласса
hover, поэтому при конфликте псевдокласс
active получает преимущество. Чтобы
получить наилучший результат, определяй-
те стили в следующем порядке: link,
visited, hover и active.
। _ I Стили link должны наследоваться раз-
Q личными состояниями (см. раздел «Уп-
'----* равление существующими или наследо-
ванными значениями свойств» далее в
этой главе). Например, стиль, который вы
задали для внешнего вида псевдокласса
link, должен наследоваться состояниями
active, visited и hover). Между брау-
зерами бывают определенные конфлик-
ты. Чтобы быть уверенными в результате,
мы рекомендуем вам определить все ат-
рибуты для всех состояний ссылки.
Оформление текста: подчеркивать или нет
Подчеркивание было стандартным способом выделения гиперссылки в сети
Internet с момента ее возникновения. Проблема с подчеркиванием ссылок состоит
в том, что если на странице имеется много ссылок, она превращается в смесь ли-
ний, и текст становится трудным для чтения. Более того, если посетители отклю-
чили подчеркивание, они не смогут увидеть ссылки на странице, особенно если
цвета ссылки и текста совпадают.
CSS позволяет вам отключить подчеркивание для ссылок, нарушая предпочтения
посетителя. Мы рекомендуем использовать настройки CSS и предполагаем приме-
нять выделение цветом для подчеркивания ссылок. Вы можете использовать под-
черкивание с состоянием hover: посетитель поместит курсор мыши на ссылку
н увидит изменение цвета.
| 76 | Основы CSS
ГТ^”1 Сеть Internet представляет собой среду ги-
пертекста, поэтому необходимо, чтобы
'----' пользователи различали текст, ссылки и
посещенные ссылки. Так как вы не можете
рассчитывать, что пользователи включат
опцию Подчеркивать ссылки (Underline
Links}, вам следует настроить внешний вид
ссылок для всех документов.
I _ I Мы рекомендуем быть внимательными при
(J изменении других атрибутов для состояния
'----1 hove г. Изменение таких атрибутов, как гар-
нитура шрифта, размер и толщина шриф-
та могут привести к тому, что текст станет
больше, чем зарезервиррванное для него
место, в свою очередь, благодаря этому
страница будет обновляться, что вызовет
раздражение у посетителей.
I Л I Если вы используете слишком много цве-
(j тов, ваши посетители не смогут понять, где
'----1 ссылки, а где обычный текст.
Е Настройка нескольких цветов для ссылок
может быть полезна при распознавании
различных типов ссылок. За дополнитель-
ной информацией по настройке несколь-
ких стилей ссылок на странице обращай-
тесь к разделу «Определение различных
стилей ссылок» в главе 18.
Выбор цвета ссылки
Большинство браузеров по умолчанию
используют синий цвет для ссылок, ко-
торые не были посещены, и фиолето-
вый - для посещенных. Проблема при
использовании различных цветов для
посещенных и не посещенных ссылок
заключается в том, что посетители мо-
гут не помнить, какой цвет применяет-
ся для какого типа ссылки. Выбранные
вами цвета должны выделять ссылки
на фоне другого текста на экране, а так-
же различать состояние ссылки (link,
visited, hover и active) и при этом не
отвлекать внимания.
Мы рекомендуем использовать для
непосещенных ссылок цвет, который
контрастирует как с цветом фона стра-
ницы, так и с цветом текста. Для посе-
щенных ссылок вам следует использо-
вать более темную или светлую вер-
сию того же цвета, которая контрасти-
рует с фоном, но является более
тусклой по сравнению с цветом не по-
сещенной ссылки. После этого более
яркие не посещенные ссылки будут
выделяться по сравнению с более тем-
ными посещенными ссылками.
Например, если бы мы создавали стра-
ницу с белым фоном и черным тек-
стом, мы бы использовали для ссылок
ярко-красный цвет (#ffOOOO) и темно-
красный цвет (#ff6666) для посещен-
ных ссылок. Более яркий цвет выделя-
ется; более темный цвет не так заме-
тен, но все равно указывает на ссылку.
Создание буквиц с псевдозлементами | 77~|
Лре DHTML for the WWW
> ф) J- (ДО $
CHAPTER VI
Pig and Pepper
Fora minute or two she stood looking at the house,
livery came running out of the wood- (she conside
judging by his face only, she would have called hi
was opened by another footman in livery, with a rc
noticed, had powdered hair that curled all over th<
and crept a little way out of the wood to listen The
great letter, nearly as large as himself, and this he
Duchess. An Invitation from the Queen to play croquet.’The Ft
changing the order of the words a little. 'From the Queen. An к
she stood looking at the house, and wondering what to do nei
wood- (she considered him to be a footman because he was i
called him a (ish)-and rapped loudly at the door with his knuc
round lace, and large eyes like a frog: and both tootmen. Alice
She fettvery curious to know what it was all about, and crept г
by producing from under his arm a great letter, nearly as large
solemn tone, 'For the Duchess An invitation from the Queen t<
solemn tone, only changing the order of the words a little, 'Fro
Рис. 227. Буквица применяется к первой букве
абзаца с помощью псевдоэлемента : first-letter
Создание буквиц
с псевдозлементами
Буквицы являются популярным спосо-
бом для начала нового раздела или гла-
вы длинного текста. Они позволяют сде-
лать первую букву абзаца более крупной
по сравнению с другими буквами и пере-
местить первые несколько строк текста в
сторону, чтобы они размещались рядом
с первой буквой. В средние века монахи
применяли буквицы в манускриптах, а
теперь вы можете использовать буквицы
в сети Internet (рис. 2.27).
Вы можете создать буквицу в CSS, если по-
лучите прямой доступ к первой букве аб-
заца с помощью псевдоэлемента first-
letter.
Псевдоэлемент представляет собой осо-
бую, уникальную часть элемента (напри-
мер, первую букву или строку абзаца).
Внешним видом псевдоэлемента можно
управлять независимо. Список других
псевдоэлементов приведен в табл. 2.2.
Таблица 22. Псевдоэлементы
Псевдоэлемент Описание Совместимость
ifirst-letter Первая буква элемента •|Е5‘, N6, 03-5, CSS1, S1
:first-line Первая строка текста в элементе IE5*, N6, 03-5, CSS1, S1
(after Пробел непосредственно после элемента N6, 05, CSS2, S1
(before Пробел непосредственно перед элементом N6, 05, CSS2, Si
• IE5.5 для Windows
| 76 | Основы CSS
Установка буквицы
l. p { font: i2px/14px Helvetica, arial,
->sans-serif; }
Укажите тег абзаца, который отобра-
зит текст с помощью нужного вам сти-
ля (листинг 2.13). В этом примере ис-
пользуется стиль 10-точечного шриф-
та Helvetica с 12-точечным отступом (за
дополнительной информацией по раз-
мерам шрифтов обращайтесь к разде-
лу «Размер шрифта» в главе 3).
2. р.dгорсар:first-letter {font: bold
->800% times, serif; color: red;
->float: left; margin-right: 5px;}
Задает описание тегов абзацев, которое
использует псевдоэлемент fi rst-letter,
чтобы сделать текст полужирным, в
восемь раз больше окружающего тек-
ста и с небольшим полем справа. Благо-
даря полю буквица не будет смешивать-
ся с остальным текстом. Другой текст
будет свободно обтекать текстовый эле-
мент справа, так как буквица будет сво-
бодно располагаться слева.
3. <р class='’dropcap”>For a minute or
->two...</p>
Чтобы создать буквицу в вашем тексте,
просто примените класс dropcap для
первого абзаца текста. В нашем примере
буквица отображена размером в 30 то-
чек, красной, смещенной вниз так, что
ее верхняя грань совпадает с верхней
гранью первой строки текста.
Листинг 2.13. Буквица помогает посетителю
определить первый абзац на странице
. .....ЛИСТИНГ " - , ., . Kt.Qj
<html>
<head> •
<style type-’text/css" media="screen”><!-
p {font: I2px/i4px helvetica,' arial,
->sans-serif;}
p.dropcap: first-letter {
font: bold 800% times, serif;
color: red;
float: left;
margin-right: 5px;
}
-x/st yle>
</head>
<body>
<h3>CHAPTER VI<br>
Pig and Pepper</h3>
<p class-’dropcap">For a minute or two she
->stood looking at the house, and wondering
->what to do next, when suddenly a footman
->in livery came running out of the
->wood...</p>
<p style-’clear:left">'For a minute or two
->she stood looking at the house, and
->wondering what to do next, when suddenly
->a footman in livery came running out of
->the wood...</p>
</body>
</html>
Создание буквиц с псевдозлементами | 79~|
I I Чтобы избежать неправильного размеще-
ния буквицы, рекомендуем вам отменить
'----1 обтекание для абзаца сразу после абзаца, в
котором находится буквица. Для этого до-
бавьте в абзац тег clear: left в стиле стро-
ки или в качестве части класса, либо ID.
С
Более старые версии Internet Explorer пока-
зывают обтекаемые буквы с базовыми ли-
ниями, которые выделяются из прочего тек-
ста (то есть, нижние грани букв располага-
ются на одном уровне). Поэтому буква, для
которой задан стиль dropcap, в действи-
тельности не смещается вниз.
। _ I Хотя мы используем понятие dropcap как
класс, теоретически вы можете задать этот
'----1 класс для тега абзаца. Правда, это приве-
дет к тому, что все абзацы документа будут
иметь буквицы. Скорее всего, вы не стре-
митесь к этому.
। I Вместо того чтобы использовать класс для
Q создания буквицы, вы можете применить
'----1 селектор первого класса. С помощью
селектора вы сможете сообщить тегам
абзаца, что они должны использовать
стиль буквицы только при условии, что за
ними сразу следует тег заголовка третьего
уровня <ИЗ>: ИЗ + р:first-letter {...}
Таким образом, только первый абзац пос-
ле заголовка получит буквицу. Однако
Internet Explorer для Windows не поддержи-
вает селекторы первого класса.
| 80 | Основы CSS
Значение iimportant
Значение 'important служит для того,
чтобы присвоить определению макси-
мальный приоритет в каскадном порядке
(см. раздел «Определение каскадного по-
рядка»). На рис. 2.28 показано, как ис-
пользовать это значение.
В примере (листинг 2.14) тег <р> переоп-
ределен, а определениям размера шрифта
(font-size) и типа шрифта (font-family)
присваивается значение ! important. Также
определен класс сору, который применя-
ется к тегу <р>, причем определению типа
шрифта присвоен максимальный при-
оритет. В результате текст печатается
шрифтом, размер которого зависит от
правила тега <р>, а тип - от правила клас-
са сору (рис. 2.29).
CSS допустимо определять внутри тега
<style>...</style> в заголовке документа
(см. раздел «Добавление стилей на Web-
страницу») или во внешнем CSS-файле,
который затем импортируется в HTML-
документ либо связывается с ним (см. раз-
дел «Добавление стилей на Web-сайт»).
р {font-size: 12рх '.important;}
Рис. 2.28. Общий синтаксис использования
значения ! important
Рис. 2.29. Из-за того что в теге <р> размеру
шрифта присваивается максимальный приоритет,
предыдущее правило, определяющее размер
шрифта в классе сору, перекрывается, и шрифт
увеличивается до 16 пунктов вместо 10. Несмотря
на то что и в теге <р>, и в классе сору типу
шрифта присваивается максимальный приоритет,
определение класса имеет преимущество перед
определением тега (см. раздел «Определение
каскадного порядка»), и текст печатается
шрифтом Times, а не Arial
Значение iimportant Г81~|
Листинг 2.14. При выборе определений, которые
нужно применить к HTML-документу, предпочтение
отдается тем из них, которые помечены
! important. В данном примере установлено два
правила. В первом определяется размер, тип, цвет
шрифта в теге <р>. Во втором определяется класс
сору, который затем используется в теге <р>. Этот
класс также меняет размер, тип и цвет шрифта.
Правила класса должны перекрывать правила тега,
но все происходит как раз наоборот, потому что
применяется значение ! important
....... ... Листинг
<head>
<style type="text/css" media=”screen"><!-
p <
font-size- 16px !important;
font-family• arial, Helvetica,
->geneva, sans-serif (important;
color, black,
}
p.copy {
font-size: lOpx:
font-family. 'Times New Roman’.
->Georgia, Times, serif !important;
color: red,
}
-></style>
</head>
<body>
<br>
<h3>CHAPTER X<br>
The Lobster 0uadrille</h3>
<p class="copy">The Mock Turtle sighed
->deeply, and drew the back of one flapper
->across his eyes. He looked at Alice, and
->tried to speak, but for a minute or two
->sobs choked his voice. ‘Same as if he
->had a bone in his throat,' said the
->Gryphon: and it set to work shaking him
->and punching him in the back. At last the
->Mock Turtle recovered his voice, and,
->with tears running down his cheeks, he
->went on again:-</p>
</bod,y>
</html>
Присвоение значения (important
i. p {
Откройте CSS-правило с помощью се-
лектора и фигурной скобки ({). Мож-
но использовать HTML-селектор клас-
са или ID.
2. font-size: 16рх !important;
Введите определение стиля, затем про-
бел и ! important. Поставьте точку с за-
пятой, чтобы закрыть правило.
3. font-family: arial. Helvetica, geneva,
sans-serif !important; color: black; }
Добавьте в это определение любые нуж-
ные вам правила, которым также можно
присвоить максимальный приоритет.
Закройте правило с помощью фигур-
ной скобки (}).
4. р.сору{...}
Добавьте другие правила и присвойте
их определениям максимальный прио-
ритет, если это необходимо.
В
Netscape 4 не поддерживает I important.
Новички часто пишут в определении I impor-
tant после точки с запятой. Это может при-
вести к тому, что браузер проигнорирует
определение, а возможно, и все правило.
Во многих браузерах можно определять соб-
|j I ственные таблицы стилей. И хотя опре-
‘' деления с ! important должны перекрывать
все другие правила, назначенные пользова-
телем, даже те, что имеют максимальный
приоритет, ни в одном браузере, протести-
рованном мною, еще не встречались. В дей-
ствительности таблицы стилей, заданные
пользователем, перекрывают таблицы сти-
лей, созданные программистом.
| 82 | Основы CSS
Наследование
родительских свойств
У всех HTML-тегов, которыми можно
управлять с помощью CSS, кроме тега
<body>, есть родитель, то есть тег-кои-
тейнер, который его окружает.
HTML-теги обычно обладают теми же
свойствами, что и их теги-родители. Это
так называемое наследование стилей. На-
пример, набор цветов, описанный в теге
<body>, используется во всех тегах, находя-
щихся внутри него (листинг 2.15, рис. 2.30
и 2.31).
Некоторые свойства не наследуются тега-
ми, например поля (margins), ширина
(width), границы (border). Вам ие соста-
вит труда выяснить, какое свойство на-
следуется, а какое - нет. В приложении А
перечислены все существующие свойства,
и для каждого из них указано, может ли
это свойство наследоваться.
Применяемые Наследованные стили
стили (первоначальные стили)
HTML
times > <bOdy>
Наследование I
red
times (+ bold)
Наследование
times + red + bold (+ italics)
Alice
</i>
</b>
</body>
Результат
Alice
Рис. 2.30. Ter <body> установлен для стиля
шрифта Times. Это наследуется тегом <Ь>,
который назначает шрифту красный (red) цвет
и полужирное (bold) начертание. Тег <i>
наследует все эти стили и добавляет свой
стиль-курсив (italic)
Рис. 2.31. Как тег <р>, так и тег <i> наследуют цвет
и тип шрифта от тега <body>. Но светло-серый цвет
фона, установленный в теге <р>, перекрывает цвет,
заданный в <body>. А белый цвет фона, указанный
в теге <1>, отменяет светло-серый
Наследование родительских свойств | 83 |
Листинг2.15. Тег <body> устанавливает стиль шрифта и цвет фона. Стиль шрифта наследуется тегом
<р>, так как тег <body> является его родителем, но <р> меняет цвет фона. Тег <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;}
1 {background-color; #ffffff:}
</style>
</head>
<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, ladl-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-неге, 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>
| 84 | Основы CSS
Управление
существующими
или наследованными
значениями свойств
Если переопределить селектор, он не по-
теряет наследованные свойства. Тег, пере-
определенный с помощью CSS, также со-
храняет свои свойства. Все оии действуют
до тех пор, пока не поменяются существую-
щие специфические свойства, которые за-
дают вид страницы (рис. 2.32).
С помощью CSS можно переопределить
тег <Ь> таким образом, чтобы он увеличил
размер шрифта и выделил текст курсивом:
b {font-size: larger; font-style: italic;}
Текст будет оформляться полужирным
начертанием, хотя это и не предусмотрено
в CSS-определеиии. Однако можно сделать
так, что тег <Ь> не станет делать текст по-
лужирным. Для этого нужно изменить
свойство ширины шрифта (font-weight):
р b {font-weght: normal;)
Когда тег <Ь> находится внутри абзаца, его
обычное действие не учитывается (лис-
тинг 2.16).
<0О OHtiafc»«, о
! СНАГГСТ VII
Рис. 2.32. По странному стечению обстоятельств
светлый шрифт превратился в полужирный
и необорот
управление существующими или наследованными значениями свойств
Листинг 2.16. Тег <р> придает шрифту
полужирное начертание только при том условии,
что текст не находится внутри тега <ь>. В этом
;случае присущее тегу <ь> свойство делать шрифт
(полужирным и то же свойство, наследованное им
фттега <р>, перекрываются
:..... ЛИСТИНГ .. 1. ...° I
<html>
<head>
<style type=”text/css" media=”screen"><!-
p {font-weight: bold;}
• p b {font-weight: normal;}
,nobold {font-weight: normal;}
-></style>
</head>
•<body>
<h3>CHAPTER VII<br>
A Had Tea-Party</h3>
<p>There was a table set out under a tree
->in front of the house, and the March
->Hare and the Hatter were having tea at
->it: a<b> Dormouse was sitting between
->them, fast asleep, and the other two
->were using it as a cushion, resting their
->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 together at one corner
->of it...</p4
<p class=”noBold">' Have some wine,' the
->March Hare said in an encouraging
->tone.</p>
:/body>
7html>
Наследованные свойства (см. предыду-
щий раздел) можно отменить. Для этого
нужно просто удалить свойство из спис-
ка определений тега-потомка, списка сти-
лей заголовка или конкретного тега.
Например, в листинге 2.16 класс .nobold
можно применить к тегу <р>, и определе-
ние начертания шрифта (в примере это
полужирный шрифт) перекроется.
I При использовании Netscape вы не сможе-
Q те удалить существующие значения. Их
।1 разрешается переопределить, но не пере-
крыть. Если вы установите в теге <ь> обыч-
ное начертание шрифта, Netscape все рав-
но отобразит текст полужирным.
| 86 | Основы CSS
Определение каскадного
порядка
Таблицы стилей внутри одной Web-стра-
ницы могут быть связанными, импорти-
рованными, встроенными и даже inline-
таблицами.
Во многих браузерах пользователи могут
создавать собственные таблицы стилей
и задействовать их поверх ваших. Есте-
ственно, что при применении двух или бо-
лее таблиц стилей одновременно появится
проблема выбора определения, которое
имеет больший приоритет. Какое важнее?
Разгадка кроется в самом названии каскад-
ных таблиц стилей.
Каскадный порядок в подобных ситуациях
определяется по следующим правилам:
существование атрибута ! important.
Определению присваивается макси-
мальный приоритет, если этот атрибут
в нем присутствует (см. раздел «Значе-
ние [important»). Многие браузеры по-
зволяют создавать собственные табли-
цы стилей. Теоретически, если и автор
страницы, и посетитель включили в
определение значение '.important, то
преимущество получит определение
автора. Однако все браузеры, протес-
тированные мною, отдают предпочте-
ние стилям пользователя;
источник правил. Таблица стилей авто-
ра страницы должна перекрывать таб-
лицу стилей пользователя, если послед-
ний ие включил атрибут ! important. На
самом деле браузеры скорее отдадут
предпочтение таблицам стилей пользо-
вателя, а не Web-дизайнера;
Листинг 2.17. Файл global.css. В этой версии на
сайте используется CSS, которая определяется по
умолчанию, а для тега <лз> назначается правило
. ... . Листинг
ЬЗ { color: blue; } •
л.... .......ая!
Листинг 2.18. HTML-фейл index.html связан
с внешним файлом global.css. Цвет текста
определяется в <лз>, но перекрывается в теге
<styie>. Цвет, установленный в <h3>,
перекрывает все другие определения цвета
(рис. 2.30)
<head>
<style type=”text/css" media=”screen”><!-
h3 {
color; lime
}
-></style>
</head>
<body>
<h3 style=”color: red”>CHAPTER X<br>
Ttie Lobster Quadrille</h3>
<p>The Mock Turtle sighed deeply, and drew
->the back of one flapper across his
->eyes... </p>
</body>
</html>
Рис. 2.33. Текст внутри тега <ИЗ> должен сначала
отображаться синим, а затем лимонным цветом.
Но цвет данного текста - красный, так как именно
он был определен последним
Определение каскадного порядка | 87 |
специфичность. Чем специфичней пра-
вило, тем выше его каскадный прио-
ритет. Значит, чем больше в правиле
HTML-селекторов, ID-селекторов или
селекторов класса, тем оно важнее. При
определении приоритета ID-селекторы
получают 100 очков, классы - 10,
а HTML-селекторы - всего одно очко.
Следовательно,селекторы0L 0L OL.cool
приобретают вес 13 (то есть 1+1+1+10),
а вес Р равен единице. Такая установка
приоритета может показаться странной,
но она позволяет присвоить больший
вес контекстным и ID-правилам и гаран-
тирует их использование;
последний выигрывает. CSS считает бо-
лее приоритетным последнее из пере-
численных правил. Это особенно по-
лезно, если вы включаете определение в
строку, чтобы перекрыть установки
стилей, перечисленные в заголовке^
существующие или наследованные
свойства. Любые стили либо являются
наследованными, либо присущи тегу
с самого начала. И те, и другие приме-
няются на практике.
Воспользовавшись этими правилами в лис-
тингах 2.17 и 2.18, мы получаем результат,
представленной на рис. 2.33. .
| 86 | Основы CSS
Настройка стилей
для печати
При упоминании Web-страиицы многие
представляют, как она выглядит на экра-
не (рис. 2.34). Но рано или поздно вам по-
надобится распечатать несколько страниц
(рис. 2.35). Элементы, которые хорошо
смотрятся на экране, не всегда выглядят
так же иа бумаге.
Настройка таблицы стилей
для конкретной среды
1. Создайте две внешние таблицы сти-
лей. Одна будет использоваться на эк-
ране компьютера, а другая - относить-
ся к принтеру (см. раздел «Добавление
стилей на Web-сайт»).
В примере (листинг 2.19) текст на экра-
не отображается белым цветом иа чер-
ном фоне. Это, безусловно, выглядит
хорошо. Но если вы захотите распеча-
тать эту страницу, результат вам не по-
нравится, к тому же значительно по-
страдает картридж принтера. Версия
для печати (листинг 2.20) содержит,
наоборот, черный текст на белом фоне
(бумаги).
2. <linkrel="stylesheet"href=”print.css"
->media=”print">
В заголовке HTML-документа напи-
шите тег <1 ink>, который ссылается на
версию CSS для печати и присваивает
свойству media значение "print" (лис-
тинг 2.21).
3. <1ink rel="stylesheet"href="screen.css"
->media="screen">
Сразу после тега <link> для печатной
версии введите тот же тег для версии
иа экране и присвойте media="screen".
Рис. 2.34. То, что вы видите на экране,
не похоже...
Рис. 2.35. ...на то, что распечатал принтер
Настройка стилей для печати | 89
ктииг2.19. Таблица стилей screen.css
ределяет вид HTML-страницы, описанной
листинге 2.21, на экране
... - ..
кйу {
color: white;
! font-family: arial, Helvetica, geneva,
: ->sans-senf;
; background: black urKalice23.gif)
->no-repeat;
, word-spacing: Ipx;
- position: relative;
1 top: 200px;
left: 165px;
i width: 480px; }
h1,h2 {
• font:small-caps bold italic 2.5em
->’minion web Georgia’,’Times New
->Roman’, Times, serif; }
jfi {
font-style: normal;
: font-variant: normal;
; font-size: 1.5em; }
idropCap {
ont: 300%/100% serif;
.or: «999999; }
Листинг 2.20. Таблица стилей print.css определяет
вид HTML-страницы, описанной в листинге 2.21,
после печати
body {
color: black;
font-size: 10pt;
line-weight: I2pt;
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; }
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: 3OO%/1OO% serif; }
| 86 | Основы CSS
Листинг 2.21. Таким образом, страница index.html ссылается на два различных CSS-файла. Один
используется при выводе страницы на экран, другой -для печати. На рис. 2.34 представлен результат на
экране компьютера, а на рис. 2.35 - та же страница после печати
1 Листик,
<html>
<head>
<link href="print.css" rel="stylesheet" media=”print”>
<link href="screen.css" rel="stylesheet" media=’’screen”>
</head>
<body>
<br>
<hl>Alice’s Adventures in Wonderland</h1>
<h2>Lewis Carroll</h2>
<p style=”font-family: monospace;">THE MILLENNIUM FULCRUM EDITION 3.0</p>
<h3>CHAPTEH I<br>
Down the Rabbit-Hole</h3>
<pxspan class="dropCap">A</span>lice was beginning to get very tired of sitting by her
->sister on the bank, and of having nothing to do: once or twice she had peeped into
->the book her sister was reading, but it had no pictures or conversations in it, ‘and what
->is the use of a book,' thought Alice 'without pictures or conversation?’</p>
</body>
</html>
®He забывайте о каскадном порядке стилей.
Важно учитывать порядок, в котором CSS-
файлы добавляются в документ. Если брау-
зер не распознает значение свойства media,
он использует обе таблицы стилей.
I л | Хотя вам доступны многие типы данных
(j (включая речь, Braille, проекцию и лоддер-
।1 жку переносных устройств), большинство
браузеров поддерживают только отобра-
жение на экране и печать.
'Актинг 222. Чтобы добавить полезные
замечания, можно использовать комментарии.
Это никак не повлияет на работу программы
лиь.ЛИОТИНГк*цХ!
/* Устанавливает конкретный вид тега:
selector=HTML-теги, ги1е=С55-правило,
определяющее вид страницы,
соттеп1=комментарии в этой CSS */
code.selector { color: #009900; }
code.rule { color: #990099; }
code.comment { color: #cc0000; }
Комментарии в CSS [~91~|
Комментарии в CSS
Как и в других частях HTML-документа,
в CSS могут содержаться комментарии.
Комментарий не влияет на программный
код, он служит своего рода проводником
для любого читающего вашу программу.
Комментарии можно включать как в заго-
ловок документа, так и во внешний CSS-
файл (листинг 2.22).
Формат комментария, который занимает
только одну строку, немного отличается
от обычного формата.
Добавление комментариев
в таблицу стилей
1. /•
Чтобы открыть область комментария в
таблице стилей, введите слэш (/) и
«звездочку» (*).
2. selector HTML tags
Введите ваши комментарии. Вы може-
те использовать любые буквы или
цифры, символы и даже разрывы
строк (клавиша Enter).
3- ’/
Чтобы завершить ввод комментария,
напечатайте символ «звездочка» (*) и
слэш (/).
Е Комментарии нельзя представлять в фор-
ме вложений.
I I Двойной слэш проще заметить при быст-
Q ром просмотре документа. Следовательно,
1----1 комментарии длиной в одну строку легче
найти. К двойному можно добавить сколь-
ко угодно слэшей:
//////Комментарий!
| 92 | Основы CSS
Стратегия создания
таблиц стилей
При создании сайта с помощью CSS необ-
ходимо учитывать следующее:
стили лучше помещать во внешние
таблицы стилей всегда, когда это воз-
можно (см. раздел «Добавление стилей
на Web-сайт»);
достоинством CSS является то, что их лег-
ко поместить в одном конкретном месте
и оттуда менять весь сайт (рис. 2.36);
на верхнем уровне сайта можно опреде-
лить таблицу global.css, которая по
умолчанию будет применяться ко всему
сайту. Это очень удобно, если, иапри-
мер, необходимо, чтобы все заголовки
первого уровня имели один и тот же
шрифт и размер (рис. 2.37);
с помощью таблицы стилей section.css
улучшают стили на подуровнях. Та-
ким образом, каждый раздел можно
менять или добавлять в глобальную
таблицу стилей. Например, вы уста-
новили тип и размер шрифта в гло-
бальной таблице стилей для заголов-
ков первого уровня, но хотите поме-
нять цвет заголовков в разделе. С по-
мощью таблицы section.css допустимо
установить цвет для каждого раздела
в отдельности;
Рис. 2.36. Обычная структура связанного файла,
которая позволяет различным HTML-страницам
применять глобальную CSS и прикреплять стили
к конкретным разделам с помощью section.css.
Заметьте, что оба раздела используют один файл
section.css, а не два разных - section 1 .css
и section2.css. Зто позволяет перемещать
HTML-файлы из раздела в раздел, не меняя URL,
служащий для связывания с документом, или
при импортировании
Рис. 2.37. На диаграмме показано, как различные
HTML-файлы можно связать с соответствующими
CSS-файлами. Файл global.css связан со всеми
тремя файлами, а с каждым конкретным связан
section, css
Стратегия создания таблиц стилей | 93 |
для различных целей лучше использо-
вать разные файлы CSS. Если вы раз-
местите все CSS в одном файле, он бу-
дет огромным и его загрузка займет го-
раздо больше времени, чем загрузка
отдельных файлов. Лучше разбить CSS
на несколько файлов и импортировать
их иа каждую страницу только при не-
обходимости;
следует располагать стили в теге <head>
после JavaScript. Несмотря на то, что тег
<style>.. .</style> можно поместить
в любой части заголовка документа,
лучше отвести для него определенное
место: так его будет проще найти.
Я обычно помещаю его в конце. Но где
бы вы ни иаписали этот тег, будьте
последовательны, не меняйте его мес-
тоположение от файла к файлу;
лучше не использовать стили в тегах
без особой иа то причины. Достоин-
ством CSS является то, что стили мож-
но применять сразу к нескольким тегам
и менять сразу иа всем сайте. Если оп-
ределить стиль непосредственно в теге,
этот плюс исчезнет.
УПМШ1Ш ШРИФТОМ
3
Оформление - один из самых мощных
способов донести идеи создателя сайта
до посетителя. Правильно оформленный
текст (заголовки, смысловые выделения,
подбор цветов) позволяет читателю не
только получить эстетическое удоволь-
ствие, но и быстрее разобраться в содер-
жании сайта.
Шрифт - неотъемлемая часть любого до-
кумента. Такие эффекты, как курсивное
или полужирное начертание, позволяют
дизайнерам выделить важные места в до-
кументе и обратить на них внимание по-
сетителя (рис. 3.1 и 3.2).
На Web-страницах с помощью CSS мож-
но не просто менять тип шрифта или при-
давать ему полужирное или курсивное на-
чертание, как в случае с HTML-тегами.
Таблицы стилей позволяют задавать об-
щий тип шрифта, устанавливать различ-
ную толщину букв, тип курсива и размер
шрифта, используя стандартные обозна-
чения, заимствованные из области книго-
печатания.
Рис. 3.1. На сайте www.tvoograohic.rsub.com
можно многое узнать об оформлении
Рис. 3.2. Сайт counterSDace.motivo.com оформлен
при помощи Flash. Здесь также представлена
информация о различных эффектах
Оформление в Web |~95~]
формление в Web
'емейство шрифтов (font family) - это
абор шрифтов с похожими характерис-
иками. В Web существует пять основных
илов шрифта (табл. 3.1):
I serif. На концах линий, составляющих
буквы, есть маленькие черточки (засеч-
ки). Засечки - наследие тех времен, ког-
да для письма использовались перья.
Такое написание позволяло выделять
отдельные буквы. Этот тип шрифта
подходит для представления текстов
большего кегля нли для текстов, на-
бранных маленьким кеглем и предна-
значенных для распечатки. На экране
буквы будут неясными, если размер
шрифта маленький;
I sans-serif. Буквы данного семейства
шрифтов не имеют засечек. И хотя сим-
волы sans-serif менее отчетливы, они
больше подходят для текстов, отобра-
жаемых на экране и набранных шриф-
том меньшего размера;
I monospace. Все символы этого типа
шрифта одинаковы по ширине. Напри-
• мер, в других шрифтах строчная буква «1»
занимает в строке гораздо меньше места,
чем заглавная «М». Но в моноширин-
ном шрифте увеличивается межсим-
вольный интервал справа и слева от этой
буквы (стоит отметить, что данный
интервал является частью буквы и не-
' отделим от нее), и, таким образом, она
. занимает столько же места, сколько и
буква М. Шрифт этого типа идеально
подходит для текстов, в которых важ-
на каждая буква (при этом не обяза-
• тельно быстро их читать), например
для программного кода, опечатки в ко-
тором могут привести к серьезным
! ошибкам;
cursive. Курсив имитирует письмо от
руки, его лучше всего использовать для
украшения текста нли смысловых вы-
делений. Большие же объемы текста,
набранные курсивом, сложно читать;
fantasy. Шрифты, служащие для укра-
шения и не входящие ни в одну из пе-
речисленных категорий, называются
шрифтами fantasy. Они весьма декора-
тивны, а шрифт Dingbats представляет
собой простые картинки или иконки.
Как и курсив, их лучше всего исполь-
зовать в качестве украшений. Однако
не следует увлекаться шрифтами fan-
tasy, даже если вы хотите усилить впе-
чатление, производимое вашей стра-
ницей на посетителя.
Таблица 3.1. Некоторые типы шрифта
Тип шрифта Пример
serif Times New Roman
sans-serif Helvetica и Arial
monospace Courier New
cursive Chancery
fantasy Weddings (t V ФМ ?)
96 | Управление шрифтом
Способы представления
текста в Web
Теоретически в Web можно использовать
любой тип шрифта. Однако существуют
определенные способы представления тек-
ста, причем у каждого метода есть и досто-
инства, и недостатки;
HTML-текст. Текст, который вы наби-
раете в HTML-документе, практически
ничем не отличается от текста, набран-
ного в любом текстовом редакторе. Но
у HTML-текста есть свои преимуще-
ства. Во-первых, его проще редактиро-
вать. Во-вторых, HTML-текст «подстра-
ивается» под ширину экрана. Однако
возможности этого типа текста не-
сколько ограничены. В большинстве
случаев текстом управляет браузер по-
сетителя страницы. Например, вы не
можете расположить текст вертикаль-
но. Более того, браузер посетителя час-
то имеет ограниченное число шрифтов
(см. далее раздел «Шрифты в браузере»).
Если вы выбрали для представления тек-
ста какой-либо шрифт, это не означает,
что любой посетитель вашей страницы
увидит текст именно таким. С помощью
CSS дизайнеры могут лучше управлять
текстовыми элементами (например, стро-
ками и межсимвольным интервалом). Но
даже в этом случае возможности HTML-
текста ограничены, особенно в отноше-
нии спецэффектов. Поэтому дизайнеры
предпочитают использовать текст в гра-
фическом представлении;
графический текст. В отличие от HTML-
текста, графический текст представляет
собой графическое нзображенне (GIF или
JPEG), элементами которого является
текст. Это значит, что вы можете ис-
пользовать любой шрифт независимо
от того, есть ли он на компьютере посе-
тителя страницы. Но и у такого форма-
та есть свои недостатки. Графический
файл имеет большой размер и медлен-
нее загружается, а текст сложно редакти-
ровать. Изображение с фиксированны-
ми размерами может просто не помес-
титься на экране посетителя;
векторный текст. Этот формат сочета-
ет в себе лучшие свойства предыдущих.
Векторный текст легко редактировать,
он «подстраивается» под размеры экра-
на, что делает его похожим на HTML-
текст. Здесь, как и в графическом фор-
мате, можно применять спецэффекты
(правда, есть небольшие ограничения)
и использовать любой шрифт.
Векторный текст в SVG и Flash
В настоящее время поместить вектор-
ный текст на сайт позволяет только
Macromedia Flash. W3C разрабатывает
новые стандарты, с помощью которых
Web-дизайнеры смогут работать с век-
торным текстом (и графикой) так же
просто, как и с HTML-текстом. Ожи-
дается появление нового формата -
масштабируемой векторной графики
(SVG). В настоящее время этот формат
является стандартом W3C, его рекла-
мирует главный разработчик SVG,
Adobe Systems Inc. Несмотря на то что
SVG позволяет, подобно Flash, исполь-
зовать встроенную в HTML-документ
векторную графику, для представле-
ния на экране данный формат ис-
пользует специальный модуль рас-
ширения браузера (plugin). Так как
модуль расширения для отображения
Flash распространяется уже три года,
сами можете догадаться, что предпоч-
тут пользователи.
Установка шрифта
Mtaur3.1. В определении можно описывать
бое количество шрифтов. Нужно лишь отделять
Кюния шрифтов друг от друга запятыми и
Кпочать в кавычки названия, состоящие из
шюльких слов
г. Листинг......
вШ1>
№Head>
к <style type=”text/css"><'-
I h1 {
I font-family: Georgia, 'Times New
» ->Roman', Times, serif;
I }
[ h3
I font-family: 'Courier New',
I ->Courier,Monaco, monospace;
J }
I .copy {
I font-family: Arial, Helvetica,
I ->Geneva, sans-serif;
}
-></style>
</head>
<body>
<hr>
I <M>ALICE'S ADVENTURES IN WDNDERLAND</h1>
<h3>Lewis Carroll</h3>
<hr>
<h3>CHAPTER I<br>
Down the Rabbit-Hole</h3>
<p class="copy">Alice was beginning
to get very tired of sitting by her
sisteron the bank...</p>
</0ody>
</html>
Установка шрифта
Удобочитаемость текста в значительной
степени зависит от применяемого типа
шрифта. Некоторые шрифты восприни-
маются лучше при чтении с экрана, дру-
гие - когда текст напечатан на бумаге. Вы-
бирая определенный шрифт, вы можете
повлиять на восприятие посетителем ва-
шей страницы.
В примере (листинг 3.1 и рис. 3.3) заголовок
первого уровня набран шрифтом Times.
Определение типа шрифта
1. font-family:
Введите название свойства и поставьте
двоеточие.
2. Georgia
Укажите название шрифта, который бу-
дете использовать.
® О О Рипе, to он www I tiniB» а»
ALICE'S ADVENTURES IN WONDERLAND
Рис. 3.3. Шрифт, определенный для заголовка,
подзаголовка и текста, перекрывает настройки
браузера, использующиеся по умолчанию
4 Тиге Дж К
| 98 | Управление шрифтом
3. , "Times New Roman", palatino
Вы можете написать несколько типов
шрифтов через запятую.
4. , serif;
После последней запятой укажите се-
мейство шрифтов, к которому относит-
ся используемый шрифт. В табл. 3.2 пе-
речислены значения, общие для всех
типов шрифтов. Хотя данные значения
применять необязательно, не стоит о
ннх забывать.
И Из всех перечисленных в списке шрифтов
браузер выбирает первый. Если этот тип
шрифта ему не доступен, браузер просмат-
ривает список далее до тех лор, пока не
найдет шрифт, имеющийся на компьютере
пользователя, Если в списке нет подходя-
щего шрифта, используется шрифт, уста-
новленный в браузере посетителя по умол-
чанию. Если вы определите семейство
шрифта, браузер найдет максимально по-
хожий шрифт, даже когда конкретные
шрифты из списка не доступны (например,
при определении семейства serif будет ис-
пользоваться шрифт без засечек). Далее в
разделе «Шрифты в браузере» перечисле-
ны шрифты, которые обычно доступны в
браузерах.
Е Названия шрифтов, состоящие из несколь-
ких слов, нужно заключать в кавычки (на-
пример, ‘ New York").
| Л I Теоретически Internet Explorer и Netscape
(J позволяют загружать на компьютер посе-
1----1 тителя конкретный шрифт, который за-
тем определяется с помощью свойства
family-name. Более подробно об этом рас-
сказано в следующем разделе.
Таблица 3.2. Значения типов шрифтов
Значение
Совместимость
<family-name>
<generic-family>
Serif
sans-serif
cursive
fantasy
monospace
* IE4 для MacOS
IE3, N4, CSS1
IE3, N4, CSS1
IE3, N4, CSS1
IE3*, N4, CSS1
IE4, N4, CSS1
IE4, N4, CSS1
IE4, N4, CSS1
Шрифты в браузере [~99~|
CSS или тег <font>
Обычно шрифт устанавливается с по-
мощью тега <font> (например, <font
face="arial, helvetica”>... </font>).
Вероятно, этот способ скоро выйдет из
употребления; так как в последних вер-
сиях HTML, соответствующих стан-
дартам W3C, тег <font> отсутствует, его
рекомендуется заменять CSS.
Основные проблемы, возникающие
при использовании тега <font>, зак-
лючаются в следующем:
этот тег нужно добавлять каждый
раз, когда необходимо установить
шрифт. Соответственно размер фай-
ла значительно увеличивается;
менять свойства шрифта нужно
в каждом теге, что, естественно,
не очень удобно.
CSS решает обе названные проблемы.
Не добавляя дополнительных тегов,
вы можете управлять видом текста,
заключенного в тег, внося изменения
лишь в одну строку документа.
Шрифты в браузере
В настоящее время в Internet используется
всего два шрифта: Helvetica и Times. Такая
ситуация вполне объяснима: эти шрифты
или их варианты установлены на каждом
компьютере.
Безусловно, указанные шрифты весьма
удобны. Но ведь существуют и другие.
Однако в Web применяется Times для
шрифтов serif и Helvetica/Arial для шриф-
тов sans-serif, и все страницы выглядят
одинаково.
Чем же можно их заменить? Все зависит от
компьютера посетителя вашего сайта. На
компьютерах Мас н Windows изначально
присутствуют определенные стандартные
шрифты. Также несколько обычных шриф-
тов включено в Internet Explorer, который
имеется почти на всех компьютерах.
Шрифты, установленные в браузерах по
умолчанию, представлены в табл. 3.3-3.5.
Итак, в действительности браузер распола-
гает не только шрифтами Helvetica н
Times, но и множеством других. Все они
перечислены в приложении D, там же по-
казано, как они выглядят.
За дополнительной информацией по
шрифтам Мас обращайтесь по адресу:
1---1 develoDer.aoDle.com/fonts. За дополнитель-
ной информацией по шрифтам Windows
обращайтесь по адресу: www.microsoft.com/
tvoograohv/fonts. Хотя эти шрифты позицио-
нируются как шрифты, предназначенные
для развития сети Internet, их можно ис-
пользовать для любого документа (презен-
тации, текстового файла и т.д.), который
передается между компьютерами.
11001 Управление шрифтом
Таблица 3.3. Системные шрифты Мас
Имя шрифта Стили
Таблица 3.3 (окончание)
Имя шрифта Стили
American Typewriter*
Apple Chancery
Apple Symbols’
Arial
Arial Black
Arial Narrow’
Arial Rounded
MT Bold*
Baskerville*
Big Caslon*
Brush Script MT*
Capitals”
Charcoal”
Chicago”
Cochin*
Comic Sans MS
Copperplate'
Courier
Courier New
Didot’
Futura’
Gadget”
Geneva
Georgia
Gill Sans*
Helvetica
Helvetica Neue*
Полужирный
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный
Полужирный
Полужирный, наклонный,
полужирный наклонный
Полужирный, курсив,
полужирный курсив
Полужирный, курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, наклонный,
полужирный наклонный
Полужирный, курсив,
полужирный курсив
Hoefler Text
Impact
Lucida Grande’
Marker Felt*
Monaco
New York”
Optima*
Palatine**
Papyrus*
Sand**
Skia
Symbol
Techno”
Textile**
Times
Times New Roman
Trebuchet MS
Verdana*
VT100*
Webdings
Zapf Dingbats*
Zapfino*
Полужирный, курсив,
полужирный курсив
Полужирный
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный, курсив,
полужирный курсив
Полужирный
* Как в OS X
* * Устанавливается в OS X только
при условии установки Classic
Herculanum'
Шрифты в браузере
кблица 3.4. Шрифты в системе Windows
Название Поддерживаемые
шрифта стили
Abadi МТ Condensed Light* Arial Black* Полужирный, полужирный курсив, курсив
took Antiqua* Полужирный, полужирный курсив, курсив
Calisto MT* Полужирный, курсив
Centura Gothic* Полужирный, полужирный курсив, курсив
Comic Sans MS* Полужирный
Copperplate Gothic told
topperplate Gothic Light
Courier New Полужирный, полужирный курсив, курсив
Lucid Console*
.ucida Handwriting Italic*
.ucida Sans Jnicode’ Курсив
'lew Gothic MT* Полужирный, курсив
OCR A Extended* Symbol Tahoma* Полужирный
rimes New toman Полужирный, полужирный курсив, курсив
Verdana* Полужирный, полужирный курсив, курсив
Webdings*
Wingdings
Таблица 3.5. Шрифты в Internet Explorer
(Windows/Мас)
Название шрифта Поддерживаемые стили
Andale Mono Arial Black Comic Sans MS Полужирный
Georgia* Полужирный, полужирный
Impact Minion Web* курсив, курсив Полужирный, курсив
Trebuchet MS* Полужирный, полужирный
Verdana курсив, курсив Полужирный, полужирный
Webdings* курсив, курсив
* Для IE5 и IE6
п
Internet Explorer устанавливает эти шриф-
ты, поэтому они могут быть недоступны
пользователям Netscape. Но поскольку на
многих компьютерах изначально имеется
1Е, весьма вероятно, что данные шрифты
на компьютере присутствуют.
* Для Windows 98 и выше
11021 Управление шрифтом
Размер шрифта
В HTML есть семь различных размеров
шрифта, но все они связаны с размером,
установленным по умолчанию посетите-
лем страницы. С помощью CSS можно из-
менять размер текста на экране несколь-
кими способами, включая традиционное
изменение размера в точках, проценты,
абсолютный размер и даже размер, зави-
сящий от окружающего текста. На рис. 3.4
показано, как выглядит на экране текст
разного размера.
В рассматриваемом примере (листинг 3.2 и
рис. 3.5) используется класс сору, в котором
определяется шрифт размером 12 пунк-
тов. Этим шрифтом затем печатается весь
текст документа.
8pt 12pt
24pt 48pt
Рис. 3.4. Размеры шрифта
ALICE'S RIGHT FOOT, ESQ.
HEARTHRUG.
NEAR THE FENDER,
(WITH ALICE'S LOVE).
Листинг 3.2. Размер шрифта устанавливается
в классе сору. Текст, заключенный в твг
<blockquote>, печатается с отступом 2еш.
Размер заголовка третьего уровня больше,
чем размер основного текста, установленный
браузером по умолчанию
<html>
<head>
<style type=”text/css”><!-
•copy {
font-size: 12px;
}
blockquote {
font-size: 2em;
}
h3 {
font-size: large;
}
-></style>
</head>
<body>
<h3>CHAPTER II<br>
The Pool of Tears</h3>
<p class="copy">'Curiouser and curiouser!'
->cried Alice...</p>
<blockquote>
ALICE’S RIGHT FOOT, ESO.<br>
HEARTHRUG, <br>
NEAR THE FENDER,<br>
(WITH ALICE'S LOVE).
</blockquote>
</body>
</html>
Рис. 3.5. Шрифт определенного размера помогает
выделить текст, Размер заголовков обычно
больше, чем размер текста, но к некоторым
из них нужно привлечь особое внимание
Размер шрифта |103
Таблица 3.6. Возможные значения свойства
font-size
Значение Совместимость
<length> IE4, N4, CSS1
<percentage> 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 выглядит боль-
Вшим, чем тот же текст в Мас.
|?Я использую pt для определения раз-
|-мера шрифта в тех случаях, когда со-
гздаю версию для печати. Гораздо луч-
Вше измерять шрифт в пикселях (рх).
«Пиксели ие всегда надежны, но резуль-
тат их использования более точен.
«Между пикселями и пунктами не су-
Вществует взаимно однозначного соот-
ветствия, но можно считать, что раз-
Виер 12рх примерно совпадает с 12pt.
Определение размера шрифта
1. font-size:
Введите font-size и поставьте двоето-
чие.
2. 12рх;
Укажите размер шрифта одним из сле-
дующих способов:
- в единицах длины (измеряется в пунк-
тах);
- используя абсолютное выражение,
например xx-small, x-small, small,
medium, large, x-large, xx-large;
- smaller или larger описывает размер
по отношению к размеру родитель-
ского элемента (см. раздел «Наследо-
вание родительских свойств» в гла-
ве 2);
- в процентах, определяющих размер
шрифта пропорционально размеру
шрифта родительского элемента (на-
пример, 75%).
В табл. 3.6 перечислены возможные зна-
чения размера шрифта и браузеры, рабо-
тающие с этими значениями.
I _ I Максимальный размер шрифта зависит от
компьютера пользователя. Однако лучше
।’ не устанавливать размер больше, чем 50
пунктов.
I _ I Не старайтесь использовать в HTML шриф-
I (j I ты только маленького размера. CSS позво-
।’ ляет создавать заголовки, состоящие из
больших букв, и это не повлияет на ско-
рость загрузки текста.
11041 Управление шрифтом
Курсив
Часто путают два типа стилей - курсив (ita-
lic) и наклонный (oblique). Курсивом на-
зывается более декоративный тип шрифта с
наклоном вправо. Нагонный шрифт пред-
ставляет собой обычный шрифт, без каких-
либо стилизованных «рукописных» укра-
шений, с небольшим наклоном (рис. 3.6).
С помощью элемента font-style можно
выделить текст курсивом, сделать шрифт
наклонным или оставить его начертание
обычным (normal). Если установлен кур-
сив, ио данный тип шрифта не имеет та-
кого свойства, текст автоматически стано-
вится наклонным.
В этом примере (листинг 3.3 и рис. 3.7)
класс booktitle и все абзацы в <blocknote>
выделены курсивом. Заголовок использует
шрифт serif, поэтому вы видите курсив-
ный шрифт; блокнот использует шрифт
sansserif, который является наклонным,
даже если вы и задаете его как курсив.
normal italic oblique
Рис. 3.6. Курсивное и наклонное начертание
Листинг 3.3. Текст внутри тега <blockquote>
и текст в классе booktitle выделяются курсивом,
а текст внутри тега <i> остается обычным
<html>
<head>
<style type=”text/css”><'-
.booktitle {
font-family: ‘times new roman',
->times, serif;
font-style: italic;
}
blockquote {
font-family: arial, Helvetica,
->serif;
font-style: italic;
}
-></style>
</bead>
<body>
< h1 class=’’booktitle”>Alice in Wonder
- >land </h1>
<pxi>How dotn the little-</i>" ’ 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>
* 0 • : «> * <
Alice in Wonderland
Improve his shining laif.
And pour the waters of the Nile
On every golden scale'
'How cheerfully he seems to gnn.
Рис. 3.7. Название книги и цитата выделены
курсивом
Курсив |105
Таблица 3.7. Возможные значения свойства font-style Установка стиля шрифта в HTML-теге
Значение Совместимость
normal IE4, N4, CSS1 1. font-style:
italic IE4, N4, CSS1 Введите имя свойства font-style и по-
oblique IE4, N6, CSS1 ставьте двоеточие.
2. italic;
Чтобы определить стиль шрифта в свой-
стве font-style, используйте следую-
щие значения (табл. 3.7):
- italic. Текст выделяется курсивом;
- oblique. Текст наклоняется вправо;
- normal. Этот атрибут отменяет все
другие.
I I Многие браузеры не различают курсив и на-
клонный шрифт, а просто воспринимают
1----- все шрифты serif как курсив, даже если вы
задали шрифты как наклонные.
I I Многие Web-дизайнеры подчеркивают сло-
ва, чтобы привлечь к ним внимание. Но луч-
1---- ше выделять текст курсивом или делать его
наклонным, так как подчеркивание загро-
мождает страницу. К тому же такой текст
можно перепутать со ссылкой.
I I Текст, выделенный курсивом, обычно за-
нимает меньше места, чем обычный текст
1---- (roman). Поэтому курсив можно использо-
вать в целях экономии места. Однако сле-
дует учесть, что читать выделенный курси-
вом текст, который набран при этом шриф-
том маленького размера, довольно трудно.
11061 Управление шрифтом
Толщина шрифта
В стандартном HTML шрифт может
быть либо полужирным, либо обычным.
CSS позволяет установить несколько
уровней «жирности» шрифта, используя
способность многих шрифтов иметь раз-
личную толщину (рис. 3.8).
В рассматриваемом примере (листинг 3.4
и рис. 3.9) создается класс bolder, который
делает линии шрифта толще.
normal bold
Рис. 3.8. Разница между обычным
и полужирным шрифтом очевидна
Д О О _____ ....;.... СЭ1
л в» -л “ ........<
I More from Alice in Wonderland
i 'I wish I hadn’t cried so much!' said Alice, as she swam about,
I trying to find her way out. 'I shall be punished for It now, j
I suppose, by being drowned in my own tears! Tbar will be a
| queer thing, to be sure! However, everything is queer to-day.’
Just tbeo she beard something splashing about Io the pool a
little way off, and she swam nearer to make out whnt It was: at
flrst sbe thought it must be » walrus or hippopotamus, but then I
she remembered how small she was now, and sbe soon made
out that it was only » mouse that had slipped in like herself.
'Would It bo of any use, now,’ thought Alice, 'to speak to this
mouse? Everything is so out-of-the-way down here, that 1
should think very likely it can talk: at any rate, there’s no
barm in trying.' So sbe began: 'O Mouse, do you know the way
out of this pool? 1 am very tired of swimming about here, О
j Mouse!’ (Alice thought this must be the right way of speaking
Рис. 3.9. Весь текст, кроме текста внутри тега <1>,
выделен полужирным шрифтом
Листинг3.4. Класс 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</ix/b>
<pxspan class="bolder”>'I wish I hadn’t cried so much1 '.. .</spanx/p>
<pxspan class-"bolder">Just then she heard<i>something</i>
->splashing about in the pool a little way off... </spanx/p>
<pxspan class="bolder">’Would it be of any use,now, '</spanx/p>
<pxspan class='bolder">'Perhaps it doesn’t understand English, ’</spanx/p>
<pxspan class='bolder”>'Not like cats!’</spanx/p>
</body>
</html>
Толщина шрифта jlQ7|
Таблица 3.8. Возможные значения свойства
font-weight
Значение Совместимость
normal 1E4, N4, CSS1
bold IE3, N4, CSS1
lighter IE3, N6, CSS1
bolder IE3, N6, CSS1
100-900 IE4*, N4‘, CSS1
* Зависит от доступной толщины шрифта
Численные значения толщины шрифта
Не все шрифты имеют девять разно-
видностей толщины. Если вы опреде-
лите невозможное значение font-
weight, вместо него будет использо-
ваться другое, которое выбирается по
следующему правилу:
от 100 до 300. Применяется сосед-
нее доступное значение толщины;
400 и 500 взаимозаменяемы;
от 600 до 900. Используется сосед-
нее доступное значение толщины.
Выделение текста полужирным
шрифтом
1. font-weight:
Введите свойство font-weight и по-
ставьте двоеточие.
2. bolder;
Укажите толщину шрифта в свойстве
font-weight при помощи следующих
значений (табл. 3.8):
- bold. Текст выделяется полужир-
ным;
- bolder или lighter. Увеличивается
толщина шрифта по сравнению
с родительским элементом;
- значение от 100 до 900 с шагом 100
увеличивает толщину шрифта, осно-
вываясь на разных доступных вер-
сиях шрифта;
- normal. Этот атрибут перекрывает
все другие.
I Не увлекайтесь использованием свойства
(J font-weight для выделения важных мест
1----1 в тексте. Вы не добьетесь нужного эффекта,
если весь текст будет выделен полужирным.
11081 Управление шрифтом
Создание Small caps
Small caps (иногда их называют «minicaps»)
полезны для выделения заголовков. С по-
мощью small caps строчные буквы перево-
дятся в заглавные, размер которых меньше,
чем у обычных прописных букв (рис. 3.10).
В приведенном ниже примере (листинг 3.5 и
рис. 3.11) тег <h2> используется для выделе-
ния названия книги с помощью small caps.
Создание правила для minicaps
1. font-variant:
Введите свойство font-variant и по-
ставьте двоеточие.
2. small-caps;
Укажите значение свойства font-vari-
ant, выбрав его из следующих вели-
чин (табл. 3.9):
- small-caps. Строчные буквы преоб-
разуются в заглавные, размер кото-
рых меньше, чем размер обычных
прописных букв;
- normal. Этот атрибут перекрывает
все остальные наследованные значе-
ния font-variant.
I I Small caps лучше всего подходит для заго-
ловкое или подобных элементов страни-
1-- цы. Текст меньшего размера, набранный
с помощью этого стиля, трудно читать.
Таблица 3.9. Возможные значения свойства
font-variant
Значение Совместимость
normal IE4, N6, CSS1
small-caps IE4, N6, CSS1
Normal Smallcaps
Рис. 3.10. Все буквы заглавные, но первая -
больше остальных
Chapter III
A Caucus-Race and a Long Tale
They were indeed a queer-looking party that assembled on the
bank-the birds with draggled feathers, the animals with their fur
dinging close to them, and ail dripping wet, cross, and
uncomfortable.
The first question of course was, how to get dry again: they had a
consultation about this, and after a few minutes it seemed quite
natural to Alice to find herself talking familiarly with them, as if
she had known them all her life. Indeed, she had quite a long
argument with the Lory, who at last turned sulky, and would only
say, 1 am older than you, and must know better', and this Alice
would not allow without knowing how old it was, and. as die Lory
positively refused to tell its age, there was no more to be said.
At last the Mouse, who seemed to be a person of authontv among ‘
Рис. 3.11. Созданный с помощью small caps
заголовок выглядит элегантно и отличается
от остального текста
Листинг 3.5. Тег заголовка второго уровня
отображает текст маленькими заглавными
буквами (small caps)
<html>
<head>
<style type="text/css”><!-
body {
font-size: 24px;
font-family: 'times new roman',
->times, serif;}
h2 {
font-variant: small-caps;
}
-></style>
</head>
<body>
<h2>Chapter III<br>
A Caucus-Race and a Long Tale</h2>
<p>They were indeed a queer-looking party
->that assembled on the bank...</p>
</body>
</html>
г
Определение нескольких значений шрифта одновременно 11091
i Листинг 3.6. Различные стили для тега <n 1 >
| и класса сору устанавливаются одновременно,
г а в теге <ЛЗ> используется стиль caption
' &О& _ЛИСТИНГ ,.о |
<html>
<head>
1 <style type-"text/css”><'-
hi {
font: bold italic small-caps
->2.5em/3em 'minion web', Georgia,
->‘Times Hew Roman’, Times, serif;
h3 {
font: caption:
}
copy {
font: 10px/20px Anal, Helvetica,
->Geneva, sans-serif;
}
-></stylu>
</head>
<body>
<hr>
<h1>Alice’s Adventures In<Dr>
Wonderland</h1>
<h3>Lewis Carroll</h3>
<hr>
<h3>CHAPTER I<Dr>
Down the Rabbit-Hole</h3>
<p class='’copy''>Aiice was beginning to
->get very tired of sitting by her sister
->on the bank </p>
</body>
</html>
Определение нескольких
значений шрифта
одновременно
Свойства шрифта можно определять не-
зависимо, но лучше записать все элемен-
ты шрифта в одном определении, исполь-
зуя свойство font.
В рассматриваемом примере (листинг 3.6
и рис. 3.12) определяется заголовок первого
уровня и класс сору, который затем приме-
няется к абзацам в тексте. С помощью спе-
циального стиля описывается тег заголовка
третьего уровня.
Рис. 3.12. Все свойства шрифта (а также высоту
строки) допускается устанавливать в одном
определении. Можно также указать для страницы
использование стилей, заданных посетителем
11101 Управление шрифтом
Определение в правиле
нескольких атрибутов
1. font:
Введите свойство font и поставьте двое-
точие. Затем укажите значения в следу-
ющем порядке (табл. 3.10).
2. bold
Укажите значение font-weight и нажми-
те клавишу пробела (см. раздел «Тол-
щина шрифта»).
3. italic
Укажите значение font-style и нажмите
клавишу пробела (см. раздел «Курсив»).
4. small-caps
Определите значение font-variant и на-
жмите клавишу пробела (см. раздел
«Создание Small caps»).
5. 26рх
Введите значение font-size (см. раздел
«Размер шрифта»).
6. /Зет.
Введите слэш (/), значение line-height
и пробел (см. раздел «Изменение от-
ступа между строками теста» в главе 4).
7. "minionweb", "Times New Roman", Times,
serif
Укажите значение font-family (см. раз-
дел «Установка шрифта»).
Несомненным достоинством Internet яв-
ляется загрузка шрифтов. Вместо того
чтобы рассчитывать на ограниченное ко-
личество шрифтов браузера или созда-
вать графические изображения с исполь-
зованием нужного шрифта, можио авто-
матически загрузить шрифт на компью-
тер пользователя.
Таблица 3.10. Возможные значения свойства 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 задействуется в строке
состояния.
I | Если вы не хотите определять какой-либо
атрибут, просто не включайте его в список.
1----- Вместо него браузер воспользуется значе-
нием, установленным по умолчанию.
п
Определение атрибутов шрифта помогает
сэкономить время. WYSIWYG-программы,
такие как GoLive и Dreamweaver, обычно
используют отдельные атрибуты по умол-
чанию.
Определение нескольких значений шрифта одновременно 11111
Где же шрифты?
Часто при загрузке шрифтов возникают следующие проблемы:
многие шрифты не являются бесплатными. Создатели шрифтов обеспокоены
тем, что они не получают компенсации за распространение их шрифтов в Web.
Это значит, что посетители загружают шрифты, а потом пользуются ими со-
вершенно бесплатно;
шрифты Windows и Мас несовместимы между собой. Для каждой из платформ
нужно включать отдельную версию;
' файлы со шрифтами бывают большими, и их загрузка может занять некоторое
время.
Netscape и Internet Explorer предложили решение перечисленных проблем. Шрифт
нельзя загрузить, как графическое изображение. Необходимо сначала обработать
его для Web. К сожалению, Microsoft и Netscape предложили несовместимые друг с
другом, сложные системы для создания подобных шрифтов.
При работе с Internet Explorer вам придется перевести шрифты в формат EOT. Для
этого служит программа WEFT
которая работает только под Windows.
А при использовании Netscape вам потребуется перевести шрифты в формат TrueDoc
(www.truedoc.com). для чего придется купить программу, выпущенную Bitstream Inc.
По утверждениям представителей Bitstream, этот формат работает, хотя и нестабиль-
но, как в Netscape, так и в Internet Explorer.
Итак, придется использовать шрифты браузера до тех пор, пока не будут созданы
шрифты, совместимые со всеми браузерами и платформами, и при этом их заг-
рузка не займет много времени.
Загружаемые шрифты
Стандарт CSS2 поддерживает загрузку шрифтов, почему же не использовать заг-
ружаемые шрифты повсеместно в сети Internet? Существует ряд ограничений по
работе с загружаемыми шрифтами.
В отдаленном будущем CSS3 должна будет решить проблемы с загрузкой шриф-
тов. Однако так как новая версия Internet Explorer для Windows (самый распрост-
раненный браузер) выйдет не раньше 2005 года, и нет никаких гарантий, что она
будет поддерживать CSS3, в настоящее время загрузка шрифтов является спорным
вопросом для Web-дизайнеров.
•мм тактом
4
Текст окружает нас повсюду. Мы использу-
ем буквы и для того, чтобы написать меню,
и для того, чтобы сочинить оду. Это луч-
ший способ, изобретенный человечеством
для выражения собственных мыслей.
Многие думают, что текст - просто способ
записи слов. Однако текст можно по-раз-
ному оформить: изменить форму и размер
букв (шрифта), расстояние между словами,
строками и абзацами. В Internet оформ-
ление используется для представления тек-
ста на экране, выделения смысловых бло-
ков и создания визуальных образов.
К сожалению, многие из задач, которые
решаются в Web с помощью оформления
текста, возникли в результате попыток
обойти ограничения этой среды.
В данной главе рассказывается, как отоб-
ражать текст с помощью CSS, сделать его
удобочитаемым и стильно оформленным.
Кернинг 1*113
Пилинг 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
-xspan class="stretch">stretching
-></span>out one paw, trying to touch
->her. ’Poor little thing!' said Alice,
1 ->in a coaxing tone, and she tried hard
1 ->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>
tftO . astma oxnjiforiM www i L»n»'Sa*ar4 _O_
£•*>?»** *
An enormous puppy was looking down at her with large round eyes, and •
feebly s tretching out one
paw, trying to touch her. Poor little thingt 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.
Кернинг
Одна из особенностей CSS заключается в
том, что HTML-стили не имеют функции,
которая позволяла бы легко изменять от-
ступ для текста, включая отступ между
отдельными буквами (кернинг), словами
и строками текста в абзаце. Конечно, вы
можете создать неразрывные пробелы н
тег разрыва строки, чтобы получить ана-
логичный эффект с HTML, но такие изме-
нения сложно вносить, контролировать и
настраивать. Используя CSS, вы можете
легко управлять отступами в тексте и из-
менять их по своему усмотрению.
Отступ между буквами
Кернинг обозначает отступ между буквами в
слове. Увеличение отступа часто позволяет
улучшить читабельность текста. С другой
стороны, слишком большой отступ может
затруднить чтение, так как отдельные слова
будет сложно различить на странице.
В этом примере (листинг 4.1 и рис. 4.1)
мы увеличили отступ между буквами сло-
ва stretching.
i Рис. 4.1. Результат применения класса stretch
1114jУправление текстом
Определение кернинга
1. letter-spacing;
Напишите letter-spacing в списке
CSS-определен нй и поставьте двоето-
чие.
2. 2еш;
Укажите значение свойства letter-
spacing (табл. 4.1):
- длину, например 2ет. Таким обра-
зом устанавливается постоянная ве-
личина межснмвольного интервала;
- normal. Этот атрибут перекрывает
все другие наследованные атрибуты.
® Положительное значение letter-spacing
увеличивает обычное расстояние между
буквами, а отрицательное - уменьшает. Зна-
чение, равное нулю, не изменяет расстояние
между буквами, но при его использовании
исчезает выравнивание текста (см. далее е
этой главе).
Таблица 4.1. Возможные значения свойства
letter-spacing
Значение
Совместимость
normal IE4* *, N6, CSS1
<length> IE4*, N6, CSS1
* Только в Mac OS, в Windows недоступно
Интервал между словами
[lii]
Люшнг 4.2. Чтобы разделить слова (и буквы)
Вробелами, следует определить класс. В теге <р>
используется отрицательное значение, поэтому
текст сжимается. В теге <р> класса сору,
наоборот, вводится положительное значение, что
перекрывает предыдущие установки
<html>
<head>
<style type="text/css”>
.title {
word-spacing: 8px;
letter-spacing: 4px; }
p { word-spacing: -8px; }
p.COpy {
word-spacing: 4px;
letter-spacing: Ipx; }
</style>
</head>
<body>
Yet more<span classs"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>nated
-></!> 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>
Интервал между словами
Подобно кернингу, интервалы между сло-
вами (word spacing) могут как улучшать,
так и ухудшать восприятие текста. Текст,
в котором между словами небольшие
пробелы, легче читать. Однако если про-
белы слишком велики, чтение значитель-
но затрудняется.
В рассматриваемом примере (листинг 4.2
и рис. 4.2) некоторые слова стоят слиш-
ком близко друг к другу, а другие разде-
лены большими пробелами.
4 * ♦ з W * ₽
v.iwn ЧК* I л weneartand
CSS la* OHTMl fv th* WWW | MNmtMgWwl Sp*C»4
Рис. 4.2. Интервалы между словами слегка
увеличены, чтобы облегчить восприятие текста.
Но слова в нижней части экрана сдвинуты друг
к другу, что мешает чтению
11151 Управление текстом
Определение интервалов
между словами
1. word-spacing:
В списке CSS-определений напишите
word-spacing и поставьте двоеточие.
2. 8рх;
Укажите величину интервала между
словами. Для этого можно использо-
вать следующие значения (табл. 4.2):
- длину, определяющую величину ин-
тервала между словами (например,
8рх);
- normal. Этот атрибут перекрывает
все наследованные значения.
® Положительное значение word-spacing уве-
личивает обычное расстояние между слова-
ми, а отрицательное - уменьшает. Значение,
равное нулю, не изменяет расстояние меж-
ду словами, но при его использовании ис-
чезает выравнивание текста.
Изменение отступа
между строками текста
Каждый, кто хоть раз в жизни писал кур-
совую работу, знает, что обычно в текстах
такого рода используется двойной интер-
вал между строками. Это позволяет луч-
ше воспринимать текст, а также записы-
вать комментарии. Междустрочный ин-
тервал (leading) легко изменить при по-
мощи свойства line-height.
В приведенном примере (листинг 4.3
и рис. 4.3) класс сору увеличивает между-
строчный интервал в два раза, при этом
высота строки цитаты немного больше
размера шрифта.
Таблица 4.2. Возможные значения свойства
word-spacing
Значение Совместимость
normal IE4’, N6, CSS1
<length> IE4*, N6, CSS1
* Только в MacOS, в Windows недоступно
Листинг 4.3. В тексте, расположенном внутри
класса сору, двойной интервал между строками,
а внутри тега <cite> - интервал меньше обычного
<html>
<head>
<style type=”text/css”><! -
.copy {
font-size: 12рх;
line-height: 2;
}
p cite {
font-size: I2px;
line-height: I4px;
}
-></style>
</head>
<body>
<p class=”copy">After a time she heard a
->little pattering of feet in the
->distance...</p>
<p><cite>Alice took up the.fan and gloves,
->and, as the hall was very hot, she
->kept fanning herself all the time she
->went on talking...</cite></p>
</body>
</html>
Изменение отступа между строками текста pl 171
Рис.4.3. В обычном тексте используется двойной
интервал между строками, а в цитате строки стоят
ближе друг к другу
rZ"j Увеличение межстрочного интервала улуч-
П шает восприятие текста, особенно если текст
'—' занимает весь экран. Для большинства тек-
стов подходит полуторный или двойной ин-
тервал.
"ТП Чтобы получить двойной интервал, нужно
(j присвоить свойству line-height значение
—1 2 или 200%, тройной - 3 или 300%.
ГТ"| Чтобы уменьшить расстояние между стро-
ll ками, можно использовать отрицательные
1—1 значения. Такой текст займет меньше мес-
та, но, вероятно, не понравится читателям.
ГТП Высоту строки допустимо определить
у в свойстве font (см. раздел «Определение
1—1 нескольких значений шрифта одновремен-
но» в главе 3).
ГТТ Вы можете изменять отступ между от-
ll дельными столбцами с помощью лара-
1—1 метра margin, про который мы расскажем
в главе 5.
Определение интервала
между строками
1. line-height:
В списке CSS-определений введите на-
звание свойства и поставьте двоеточие.
2. Укажите значение высоты строки. Мож-
но использовать следующие значения
(табл. 4.3):
- число, на которое нужно умножить
размер шрифта, чтобы получить ве-
личину интервала (например, 2 для
двойного интервала);
- длину, например 24рх. Независимо от
размера шрифта интервал для каж-
дой строки текста устанавливается
с помощью этой единицы. Так, если
размер шрифта равен 12рх, а высота
строки - 24 рх, интервал между стро-
ками будет двойным;
- проценты. Высота строки пропор-
циональна размеру шрифта;
- normal. Этот атрибут перекрывает все
наследованные значения межстроч-
ного интервала.
Таблица 4.3. Возможные значения свойства
line-height
Значение Совместимость
normal IE3, N4, CSS1
<number> IE4, N4, CSS1
<length> IE3, N4, CSS1
<percentage> IE3, N4, CSS1
11181 Управление текстом
Заглавные и строчные
буквы
При работе с динамическим текстом нельзя
заранее угадать, в каком виде он появится
на экране, какими буквами будет набран -
заглавными или строчными. Но с помо-
щью свойства text-transform это упуще-
ние можно исправить.
В рассматриваемом примере (листинг 4.4)
имена героев набраны строчными буквами,
однако на экране (рис. 4.4) онн начинаются,
как и положено, с заглавной буквы.
60 0
g & ж g at g_____________
ALICE UPPERCASE
alice lowercase
Alice Capitalized
Oocummr-Bor* у
Листинг 4.4. Использование класса позволяет
писать слова с заглавной буквы
........^лжэдрг, ............ . _ о)
<html>
<head>
<style type="text/css'' media
' ->”screen”><!-
body {
font-size: 28pt:}
.nameuppercase {
text-transform: uppercase;}
.nameLowercase {
text-transform: lowercase;}
.nameCapitallze {
text-transform: capitalize;}
-></style>
</nead>
<body>
<p class=”nameUppercase”>
->alice uppercase</p>
<p class="nameLowercase”>
->ALICE LOWERCASE</p>
<p class=”nameCapitalize’‘>alice
->capitalized</p>
</body>
</html>
Рис. 4.4. Несмотря на то что слова в HTML
набраны строчными буквами, на экране они
начинаются с прописных
Выравнивание текста по горизонтали 11191
Шлица 4.4. Возможные значения свойства
!text-transform
Значение Совместимость
capitalize IE4, N4, CSS1
uppercase IE4, N4, CSS1
lowercase IE4, N4, CSS1
none IE4, N4, CSS1
о» К {U ® M«p7/www wWbedenvironmenrs
Left
Лее» old. Father Wdbam.' Ле young man said. 'Andyour hair hot
teams very whin: And yet you incessantly stand on your head- Do you
tht,aiyour agt, d it right’’
Right
b ч^уоиЛ.'Father Wilbam replied to his son. 'I/eared it might injure the I
hremtBut.tww that Гт perfectly sure I have none. Why. I do is again and I
Center ;
Youtre oU.‘said the youth, 'at I mentioned before, And have grown matt
матпогф fat; Yet you turned а Ьаск-somorsaedl bi al the door- Pray. ।
what is the reason of that’’ ,
Jmtffied
Badly fanwing whit sbc did. sbc picked up a little bit of sack, «nd held it out
tit puppy; woeteupon the puppy jumped inm rteiiroff «И to feet и once,
sttswlp of delight, and roabod at the side, and made believe to worry it;
tm Abe dodged behind «great thistle. ю keep herself from being tun over,
d fte tooment she appeared on the other side.
:0м»
ftt.4.5. Выравнивание текста по левому краю,
fio правому краю, по центру и по ширине
Определение регистра
1. text-transform:
В списке CSS-определений напишите
text-transform и поставьте двоеточие.
2. capitalize
Чтобы определить вид текста, введите
одно из следующих значений (табл. 4.4):
- capitalize преобразует первую бук-
ву слова в заглавную;
- uppercase меняет все буквы на заг-
лавные;
- lowercase понижает регистр всех
букв в слове;
- попе перекрывает все наследован-
ные значения этого свойства и ос-
тавляет текст без изменений.
[ Л | Если вы хотите, чтобы определенная часть
(J текста была написана заглавными буквами,
।1 лучше так ее и напечатать, поскольку ста-
рые версии браузеров могут не поддержи-
вать перечисленные свойства.
Е Свойство text-transform удобно для фор-
матирования динамического текста. Напри-
мер, с помощью text-transform все назва-
ния при выводе содержимого базы данных,
набранные заглавными буквами, можно сде-
лать более понятными на экране.
Выравнивание текста
по горизонтали
Обычно текст выравнивается по левому
краю или по ширине (так называемый га-
зетный стиль, когда текст выравнивается
и по правому, и по левому краю). Чтобы
привлечь к тексту внимание, его выравни-
вают по центру или по правому краю.
С помощью свойства text-align можно уп-
равлять выравниванием текста (рис. 4.5).
11201 Управление текстом
Установка выравнивания текста
1. text-align•
В списке CSS-определений напишите
название свойства и поставьте двоето-
чие (листинг 4.5).
2. left;
Установите один из стилей выравнива-
ния (табл. 4.5):
- left - по левому краю;
- right- по правому краю;
- center-по центру;
- justify - по ширине.
I _ I Выровненный по ширине текст может не
Ц очень удачно выглядеть на экране. Это лро-
L ' исходит из-за того, что в коротких строках
увеличивается расстояние между словами,
ведь все строки должны быть одной длины.
К тому же до сих лор не ясно, улучшается
или ухудшается восприятие текста, выров-
ненного по ширине.
Листинг 4.5. Для каждого типа выравнивания
определен свой класс
<html>
<head>
<style type="text/css" media=”screen"><’-
.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
->Willlam. ..</ix/p>
<hr>
<h2 class=’'right">Right</h2>
<p class=”right”xi>'In my youth.' Father
->William replied to his son... </ix/p>
<hr>
<h2 class="center”>Center</h2>
<p class=”center”xi>’You are old,’ said
->the youth.. .</ix/p>
<hr>
<h2 class=”justify”>Justified</h2>
< p class=”justify’'>Hardly knowing what she
- >did. she picked up a little bit of stick,
- >and held it out to the puppy...</p>
</body>
</html>
Таблица 4.5. Возможные значения свойства
text-align
Значение Совместимость
left IE3, N4, CSS1
right IE3, N4, CSS1
center IE3, N4, CSS1
justify IE3, N4, CSS1
Вертикальное выравнивание текста 1121
ЙЛ -Pl1™1 0HTMt <ft* *** 1 ‘“Ч"1*» ; v ; Л i* * ч а» •* : o.
И I л I 1 J 1 1 I i UH i ... i 1
№.4.6. Выравнивать текст по отношению
базовой линии строки можно разными
гособами
Ьбпица 4.6. Возможные значения свойства 6rtical-align
Значение Совместимость
Super IE4, N6, CSS1
Sub IE4, N6, CSS1
feseline IE4, N6, CSS1
crelative> IE5‘, N6, CSS1
4»rcentage> IE5“, N6, CSS1
‘ IE5.5 и IE6 в Windows "Только в MacOS, в Windows недоступно
Ьнща 4.7. Определение позиции элемента (отношению к родительскому элементу
качение Тип выравнивания
до Над самым высоким элементом в строке
iddle В середине строки родительского элемента
ottom На уровне нижней части строки
ext-top Над строкой родительского элемента
ext-bottom Под строкой родительского элемента
Вертикальное
выравнивание текста
С помощью свойства vertical-align мож-
но определить положение элемента в стро-
ке по отношению к окружающему тексту,
то есть поместить его выше или ниже базо-
вой линии строки. Данное свойство работа-
ет только в inline-селекторах, тегах, которые
не окружены пробелами. Например, теги
<а>, <img>, <b>, <1>.
На рис. 4.6 представлены разные типы вер-
тикального выравнивания.
Установка вертикального
выравнивания
1. vertical-align:
В списке CSS-определений напишите
название свойства и поставьте двоето-
чие (листинг 4.6).
2. super:
Установите один из;стилей вертикаль-
ного выравнивания (табл. 4.6):
- super оформляет текст верхним ин-
дексом;
- sub оформляет текст нижним индек-
сом;
- baseline помещает текст на базовой
линии строки (обычное положение);
- относительное значение из табл. 4.7
выравнивает текст по отношению
к родительскому элементу. Напри-
мер, чтобы выровнять верхнюю часть
текста по отношению к верхней час-
ти родительского элемента, введите
top-text;
- процентное значение поднимает
или опускает элемент пропорцио-
нально размеру шрифта его роди-
тельского элемента (например, 25%).
1122| Управление текстом
И Верхние и нижние индексы используются
в научных текстах. Например, они понадо-
бятся для того, чтобы записать теорему Пи-
фагора: а2 + Ь2 = с2 - или химическую фор-
мулу, скажем формулу молекулы воды: Н2О.
НВам следует помнить о том, что ни стиль
subscript, ни стиль superscript не уменьша-
ют размер текста, поэтому мы рекоменду-
ем вам включить font-size в ваше опреде-
ление стиля (см. раздел «Размер шрифта»
в главе 3).
Н Верхние индексы также применяются в снос-
ках, с помощью которых добавляется ссыл-
ка на важные замечания в конце страницы
или на другой Web-странице.
Листинг 4.6. Для каждого типа вертикального
выравнивания определен свой класс
Листинг
<html>
<head>
<style type="text/css">
.superscript {
vertical-align: super;
font-size I2px; }
.baseline {
vertical-align: baseline;
font-size 12рх. }
.subscript {
vertical-align: sub;
font-size 12px; }
top {
vertical-align- top,
font-size 12рх, }
.middle I
font-size I2px:
vertical-align- middle; }
bottom {
vertical-align bottom;
font-size l2px, }
.texttop i
vertical-align: texttop;
font-size 12рх. }
textbottom {
vertical-align: text-bottom;
Листинг 4.6 (окончание)
t,ee r.t.. : листинг ............q~1
font-size: 12px; }
.normal {
font-weight: bold;
font-size: 24px; }
</style>
</head>
<body>
<p class="normal">Alice <span class=
->"baseline">Baseline</spanx/p>
<p class="normal">Alice <span class=
->"sup0rscript”>Superscript</spanx/p>
<p class="normal">Alice <span class=
->"subscript ">Subscript</spanx/p>
<p class="normal">Alice <span class=
->"top">Top</spanx/p>
<p class="normal">Alice <span class=
->"middle‘>Middle</spanx/p>
<p class=‘'normal">Alice <span class=
->"bottom">Bottom</span></p>
<p class="normal">Alice <span class=
->”texttop">Text-Top</spanx/p>
<p class="normal">Alice <span class=
->“textbottom">Text-Bottom</spanx/p>
</bOdy>
</html>
Выделение абзацев в тексте 11231
100 СММЧСИТЖ tv , о
JL** *•* ? '..... .... *
сштк
П* tat* teoA ь t ып* м
&=.«=_______~ ........:: * 1 _____
Рис. 4.7. Абзацы выглядят лучше, когда
они выделяются
1 Листинг 4.7. В классе сору устанавливается
отступ, равный 10% от ширины экрана.
’ Чем шире экран, тем больше отступ
%- ЧТ» ЛиРП1НС4Н^.& О-1
<html>
<head>
<style type="text/css">
P-copy {
text-indent: 10X; }
</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
1 ->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>
f/body>
:/html>
Выделение абзацев
в тексте
Internet предоставляет различные возмож-
ности выделения абзацев в тексте. Самый
известный способ начать новый абзац -
красная строка.
Однако раньше выделять абзацы таким об-
разом было невозможно, потому что брау-
зеры преобразовывали несколько пробелов
в один. Абзацы же отделялись друг от друга
пустой строкой.
Теперь дополнительные пробелы в нача-
ле строки добавляют с помощью свойства
text-indent (рис. 4.7).
Установка отступа первой строки
1. text-indent:
В списке CSS-определений напишите на-
звание свойства и поставьте двоеточие
(листинг 4.7).
1
11241 Управление текстом
2. 10%;
Чтобы указать величину отступа, введите
одно из следующих значений (табл. 4.8):
- длину, например 2ет. Такой отступ
хорошо выглядит на экране;
- процентное значение, определяю-
щее длину отступа пропорциональ-
но ширине абзаца (например, 10%).
Таблица 4.8. Возможные значения свойства
text-indent
Значение Совместимость
<length> IE3, N4, S1, 03-5, CSS1
<percentage> IE3, N4, S1, 03-5, CSS1
Если вы используете отступы для абзацев,
у то можете настроить отступ абзаца как О,
1----1 чтобы исправить свойство тега <р> добав-
лять отступы между абзацами.
I _ । Поскольку отступы более привычны для
(J печати, чем для сети Internet, мы рекомен-
।1 дуем вам добавить отступы только в те раз-
делы страницы, которые предназначены
для печати.
Как сделать так, чтобы Web-страница выглядела удачно при печати
Мне никогда не приходилось видеть офис, в котором не было бы бумаг (и я удив-
люсь, если когда-либо увижу). Однако при появлении компьютера возникла на-
дежда, что он позволит избавиться от бумажной документации, то есть больше не
будет заваленных шкафов и забитых папок, а вместо этого придет утопия с постоян-
ной переработкой электронной информации, почти как в фильме «Star Trek».
Но почему-то мне кажется, что мы откроем технологию межзвездных перелетов
раньше, чем сумеем избавиться от бумаги.
Получив в свое распоряжение лазерные и струйные принтеры, мы оказались по-
гребенными под тоннами идеально напечатанной бумаги. Даже Internet только уве-
личивает количество бумаги, которой мы пользуемся. Если длина Web-страницы
превышает несколько строк, большинство людей предпочитает ее распечатать.
Правда, сеть Internet создавалась для того, чтобы отображать информацию на эк-
ране, а вовсе не на бумаге. При печати Web-графика выглядит угловато, а управле-
ние печатью в HTML оставляет желать лучшего. Впрочем, вы можете улучшить
внешний вид Web-страниц при печати. Это потребует небольших усилий, но ре-
узультат способен это оправдать.
Выделение абзацев в тексте [~125|
Как сделать так, чтобы Web-страница выглядела удачно при печати (окончание)
Вот семь простых действий, которые вам нужно предпринять, чтобы улучшить
внешний вид ваших Web-страниц при печати:
используйте CSS. Каскадные таблицы стилей - это будущее Web-дизайна. CSS
позволяет вам создавать документы, которые будут выглядеть на печати так же,
как и документы, созданные с помощью текстового редактора;
определите рабочую среду. CSS позволяет вам создавать различные таблицы
стилей в зависимости от того, как должна отображаться страница, - как правило,
на экране или на печати (см. раздел «Настройка стилей для печати» в главе 2);
используйте разрывы страниц, чтобы сохранять заголовки вместе с соответ-
ствующим текстом. Хотя функция разрывов страниц поддерживается далеко не
всеми программами, она будет оставаться стандартом долгое время;
В отделяйте содержимое от навигации. Попробуйте хранить основное содержи-
мое (то есть ту часть информации, которая будет наиболее интересна для ауди-
. тории) в отдельной области, не связанной с навигацией сайта. Затем вы можете
, сделать так, чтобы CSS не отображала средства навигации при печати;
I ие используйте прозрачные цвета в графике. Это особенно важно в том слу-
чае, если графика имеет цвет фона или цвет, отличный от белого. Прозрачная
часть изображения в формате GIF обычно печатается белым цветом независи-
. мо от того, какой цвет расположен позади нее в окне. Если графический объект
расположен на белом фоне, это не проблема, но если на темном, результат бу-
дет неудовлетворительным;
I не используйте текст в графике. Проблема с печатью в сети Internet заключа-
ется в том, что текст в графическом изображении выглядит в окне идеально, но
при печати кажется угловатым. При этом обычный текст HTML, который ка-
жется на экране угловатым, на печати выглядит идеально. Попробуйте сделать
так, чтобы большая часть текста была в формате HTML;
i создайте отдельную печатную версию Web-сайта. Вместо того чтобы застав-
лять посетителей следовать всем ссылкам на сайте и печатать каждую страницу
’ по отдельности, сделайте один документ для всего сайта, который любой
пользователь сможет открыть и распечатать. Adobe Acrobat может конвертиро-
вать содержимое сайта в более-менее универсальный файловый формат, кото-
рый сохранит почти все свойства форматирования, шрифты и графику для
отправки по сети Internet. За дополнительной информацией по Adobe Acrobat
вы можете обратиться по адресу: www.adobe.com.
11261 Управление текстом
Настройка цвета текста
и фона
Параметр color используется для настрой-
ки цвета фона для элемента. Несмотря на
это вы можете применять данный пара-
метр для настройки цвета фона горизон-
тальных объектов и формирования эле-
ментов (рис. 4.8).
вое OHTML 1<к tM WWW | Utting «rewound Color О
>; «9» •» и ((} •й 4' о
CHAPTER V
Advice from a Caterpillar
Рис. 4.8. Текст в заголовке этой страницы был
изменен на red
Как избежать эффекта «вдов» и «сирот»
Две неприятные проблемы могут возникнуть при печати Web-страниц:
эффект «вдов» проявляется в том случае, если последняя строка от конца абза-
ца появляется вверху страницы;
эффект «сирот» проявляется в том случае, если первая строка от начала абзаца
появляется внизу страницы.
Netscape и Internet Explorer для Мас (но не для Windows) позволяют вам указать, сколь-
ко строк текста должны появляться в абзаце вверху («вдова») или внизу («сирота»)
страницы до появления разрыва страницы. Вы можете это сделать с помощью пара-
метров widows и orphans:
Р {
widows:5;
orphans'10; (
f
Данный код вынуждает пять строк текста (или более) появляться вверху страницы
в абзаце, а десять строк текста - ^низу страницы. В противном случае, текст абзаца
будет сжат и умещен на странице.
, Еще раз отметим, что эти параметры не работают в Internet Explorer для Windows.
Настройка цвета текста и фона [127]
Листинг 4.8. Значения цветов добавляются в
различные классы и теги, чтобы придать им
различные оттенки красного
<html>
<head>
<style type="text/css” media=”screen"><!-
h2 {color: red;}
form {color #990000;}
input {color. rgb(100%, 0%, 0%);)
.popy {color rgb(l02,102,102}
-></style>
</head>
<body>
<h2>CHAPTER V<br />
Advice from a Caterpillar</h2>
<p class="copy”>The Caterpillar and Alice
•>looked at each other for some time
->in silence at last the Caterpillar took
->the hookah out of its mouth, and
->addressed her in a languid, sleepy
->voice.</p>
<p class="copy">’Who are you?' said the
^Caterpillar </p>
<p class="copy">This was not an
->encouraging opening for a conversation.
->Alice replied, rather shyly, ‘l-I
->hardly know, sir, just at present- at
->least I know who I WAS when J got up
->this morning, put I think I must have
->been changed several times since
->then. ’</p-
<form action="ff" metnod=”get” name=
->’’FormName">
Enter your advice here: <input type=”text"
->name-’textfieldName" size=''48”><Dr>
<input type='submit" name="advice" value=
->”Give Advice">
</form>
</body>
</html>
Настройка цвета фона
1. color;
В списке CSS-определеиий введите па-
раметр color и поставьте двоеточие
(листинг 4.8).
2. red;
Теперь введите значение для цвета
элемента (табл. 4.9). Значение может
быть названием цвета, значением в
шестнадцатеричном формате или зна-
чением RGB (см. раздел «Значения и
единицы измерения» во введении).
1 Д-! Если вы будете использовать один цвет для
(/ нескольких вложенных элементов, зто мо-
1---1 жет привести к нежелательным изменени-
ям цвета. Приведем самый яркий пример:
если вы зададите цвет в теге <body>,
Internet Explorer 4/5 и Netscape 6 изменят
цвет всех элементов объекта. Всегда учи-
тывайте, какие именно теги вы изменяете,
и как это может повлиять на другие теги на
Web-странице (см. раздел «Наследование
родительских свойств» в главе 2).
I' ”1 Цвет границы тега может быть изменен
Q с помощью параметра color. Это измене-
।1 ние затем может быть отменено парамет-
ром border-color.
Таблица 4.9. Значения цвета
Значение Совместимость
<color> IE3, N4, S1, 03.5, CSS1
11281 Управление текстом
Украшение текста
С помощью атрибута text-decoration вы
можете украсить текст одним из следую-
щих способов: подчеркнуть, перечерк-
нуть, провести линию или сделать текст
мерцающим. Эти украшения используются
для привлечения внимания читателя к важ-
ным фрагментам текста (рис. 4.9).
CSS »ndOHTMLfe®rW*WiD«M«ins Т«М _ . - .
>: 4» > ; Щ) » «*
CHAPTER IV
The Rabbit Sends in a Little Bill
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 i
muttenn;
that it was looking for the fan and the pair of white kid gloves, and she
very good-naturedly began hunting about for them, but they were
nowhere to be seen--everything seemed to have changed since her
swim in the pool, and the great hall, with the glass table and the little
i door, had vanished completely.
Добавление в текст
декоративного элемента
1. text-decoration:
В списке CSS-определений напишите на-
звание свойства и поставьте двоеточие
(листинг 4.9).
Рис. 4.9. На рисунке представлены разные
способы украшения текста, однако самым
полезным из них является подчеркивание.
Чтобы выделить текст, который будет удален,
можно использовать зачеркивание
Листинг 4.9. Важные фрагменты текста подчеркнуты, если они не находятся внутри тега <ет>.
В противном случае текст перечеркнут, и над ним проходит линия, так как эти свойства наследуются
от тега <р>
<head>
<style type="text/css">
em { text-decoration: underline; )
p em { text-decoration: line-through; }
p {text-decoration: overline; }
</style>
</head>
<Dody>
<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 Duchess1 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>
Украшение текста 11291
Табница 4.10. Возможные значения свойства
text-decoration
Значение Совместимость
попе IE4, N4, CSS1
underline IE3, N4, CSS1
overline IE4, N6, CSS1
line-through IE3, N4, CSS1
blink IE4, N4, CSS1
2. underline;
Чтобы указать стиль украшения, исполь-
зуйте следующие значения (табл. 4.10):
- underline помещает линию подтек-
стом;
- overline располагает линию над
текстом;
- line-through перечеркивает текст;
- blink делает текст мигающим;
- попе снимает все установленные ра-
нее декоративные стили.
I _ I В список определений можно включить
U несколько декоративных стилей при усло-
1---1 вии, что первый в списке не попе. Стили
нужно разделить пробелами: underline
overline underline blink.
I л I Многим посетителям, особенно тем, кто
(J находится на сайте долго, не нравится ми-
'----' гающий текст. Поэтому не стоит увлекать-
ся стилем blink.
I л I Зачеркивание удобно в online-каталогах:
U старая цена товара зачеркивается, а новая
'---1 остается без изменений.
I _ I Если назначить свойству text-decoration
(J значение попе, то во многих браузерах
'----1 может исчезнуть подчеркивание ссылок.
Многие посетители находят ссылки в ос-
тальном тексте именно по подчеркиванию.
Однако я считаю, что выделение ссылок та-
ким образом загромождает страницу, к тому
же ссылки можно отметить и другими спо-
собами. Тем не менее посетители предпо-
читают традиционное подчеркивание.
5 Тиге Дж К
11301 Управление текстом
Настройка направления
текста
Сеть Internet все чаще используется для
отображения текстов на языках, которые
используют кодировку, отличную от ла-
тинской. Направление текста (слева на-
право или справа налево) может разли-
чаться в зависимости от языка, поэтому
может случиться так, что вам понадобит-
ся изменить настройки вашего текущего
браузера, если вы не используете англий-
ский язык (рис. 4.10).
Настройка направления, в котором
отображается текст
1. direction:
В списке CSS-определений введите па-
раметр direction и поставьте двоеточие
(листинг 4.10).
2. rtl;
Введите значение для направления
(табл. 4.11). Выберите один из вариан-
тов:
- rt 1. Текст будет отображен справа
налево;
- 11 г. Текст будет отображен слева на-
право (для западных языков).
3. unicode-bidi:
В списке CSS-определений введите па-
раметр un’code-bidi и поставьте двое-
точие. Этот параметр используется для
того, чтобы указать, как следует при-
менять атрибут direction при условии,
что на одной Web-странице встречает-
ся текст с разным направлением.
tfeL ОТ thgIR
Рис. 4.10. Во второй части текста используются
латинские буквы, но порядок текста был изменен
на обратный
Таблица 4.11. Значения направления
Значение Совместимость
rtl IE5*, N6, S1, CSS2
It г IE5*. N6, S1, CSS2
• Только для Windows, не поддерживается в Мас
Настройка направления текста fl311
Листинг 4.10. Класс rightToLeft создается для
того, чтобы отображать текст справа налево даже
в том случае, если браузер использует установку
отображения текста слева направо
i,1 ЛИСТИНГ 1
<html>
<head>
<meta http-eauiv=”content-type" content=
->”text/html;charset=IS0-8859-1">
<title>CSS and DHTML for the WWW | Setting
->Text D’irection</title>
<style type=”text/css” media=”screen”><! -
.leftToRight {
direction: Itr,
unicode-bidi: normal; }
rightToLeft {
direction: rtl;
unicode-bidi: bidi-override; }
-></style>
</head>
<body>
<h2 class=”leftToRight">Left to Right</h2>
<p class=”leftToRight”>Hardly knowing
' ->what she did, she picked up a little
> ->bit of stick, and held it out to the
->puppy...</p>
: <h2 class=”rightToLeft">Right to Left
-></h2>
• <p class-’rightToLeft”>Hardly knowing
j ->what she did, she picked up a little
->bit of stick, and held it out to the
->puppy...</p>
</body>
</html>
4. bidi-override;
Введите значение для встроенного кода
двух направления (табл. 4.12). Выбери-
те одно из следующих значений:
- bidi-override, чтобы изменить те-
кущие настройки направления тек-
ста для браузера. Этот параметр не-
обходим для правильного измене-
ния направления текста;
- embed, чтобы включить текст с двой-
ным направлением в текст с теку-
щим направлением. Этот параметр
эффективно выравнивает текст по
левому (Itr) или правому (rtl) на-
правлению, хотя пунктуация в кон-
це текста перемещается;
- normal, чтобы использовать для
встроенного текста с двумя направ-
лениями установки браузера, задан-
ные по умолчанию.
1 л I Помните, что все изменения будут иметь
зффекттолько в том случае, если компью-
।1 тер пользователя может правильно ото-
бражать текст на другом языке.
Таблица 4.12. Значения параметра unicode-bidi
Значение Совместимость
bidi-override IE5*, N6, CSS2
embed IE5*, N6, CSS2
normal IE5*, N6, CSS2
’ Только для Windows, не поддерживается в Мас
11321 Управление текстом
Установка разрыва
страницы для печати
Когда вам потребуется распечатать Web-
страницу, вы можете столкнуться со сле-
дующей проблемой. Нельзя точно ска-
зать, где закончится страница. Web-стра-
ница обычно состоит из нескольких пе-
чатных страниц. Может случиться так,
что заголовок раздела окажется в конце
страницы, а текст - в начале следующей.
Такая проблема решается добавлением
в HTML-тег определенного програм-
много кода (см. раздел «Добавление сти-
лей в HTML-тег» в главе 2).
В рассматриваемом примере (рис. 4.11) но-
вая глава начинается со второй страницы.
Когда вы распечатываете Web-страницу,
заголовок может попасть в любое место
печатного листа. Но если добавить разрыв
страницы в тег <h3> (листинг 4.11), легко
добиться того, что заголовок при печати
окажется на новой странице (рис. 4.12).
в О О a$«ndDHTML>erih«WWWiS<HUi4P49e>rt>luforlMn<»<e Q
4g: <&» -Ч Ц® Й1' в i
CHAPTER Vlll
Рис. 4.11. На экране за одним разделом сразу
идет следующий
Листинг 4.11. В теге <пз> определен разрыв
страницы при печати
‘^."..ЛИСТИНГ,—.-»>«:>!.Го]
<h tml>
<body>
<p>0nce 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>
Установка разрыва страницы для печати р133~|
Ш
Рис. 4.12. При печати каждый раздел начинается
с новой страницы
Таблица 4.13. Значения page-break-before
и page-break-after
Значение Совместимость
always IE4, N7, S1,05, CSS2
auto IE4, N7, S1,05, CSS2
Установка разрыва страницы
1. style type="
Это CSS-свойство функционирует толь-
ко в составе атрибута style в HTML-теге.
2. page-break-before:
В списке CSS-определений напишите
название свойства и поставьте двоето-
чие (листинг 4.11).
3. always;
Чтобы определить способ управления
разрывами страницы, введите одно из
следующих значений (табл. 4.13):
- always помещает разрыв страницы
перед элементом;
- auto позволяет браузеру определить
положение разрыва страницы.
4. "
Добавьте другие стили и закройте ат-
рибут style с помощью кавычек (").
В
Помните, что если этот атрибут включить
в CSS-правило, он не будет работать: его
нужно вводить непосредственно в тег
с атрибутом style. То же самое относится
и к свойству page-break-after, но разрыв
страницы помещается после тега.
упршони
жмшом
5
Из физики известно, что все тела состоят из
атомов, а каждый атом обладает рядом ха-
рактеристик. Атомы образуют молекулы,
свойства которых отличаются от свойств
атомов.
Так и Web-страница состоит из HTML-
тегов. У каждого тега есть свои возмож-
ности. Теги разрешается комбинировать,
создавая Web-страницу. В итоге она ста-
новится объектом, гораздо большим, чем
ее составляющие.
Каждый тег представляет собой самостоя-
тельный элемент на экране независимо
от того, является он отдельным тегом
или определен внутри других. И этим
тегом можно управлять с помощью CSS.
Чтобы описать все эффекты, применяе-
мые к HTML-элементам, рассмотрим его
как объект, имеющий несколько свойств:
поля, рамки, внутренний отступ, ширину
и высоту. CSS позволяет работать со все-
ми этими свойствами.
В данной главе рассказывается, как управ-
лять элементом и его свойствами.
Что такое элемент |~135]
Что такое элемент
Термин «элемент» относится к различным
частям HTML-документа, которые опреде-
ляются с помощью тегов-контейнеров. На-
пример, <p>Alice</p> представляет собой
HTML-элемент. Выражение <div><p><b>
Alice<img scr="alice11 .gif "х/ьх/рх/
div> также является HTML-элементом.
В первом примере элемент создан с помо-
щью одного тега. Во втором он представля-
ет собой набор вложенных тегов, каждый
из которых, в свою очередь, является от-
дельным элементом. Помните, что вложен-
ные теги называются тегами-потомками по
отношению к тем тегам, внутри которых
они находятся. Последние называются тега-
ми-родителями (см. раздел «Наследование
родительских свойств» в главе 2).
В следующих разделах подробно описы-
ваются составляющие элемента.
Рис. 51. У элемента есть поле, рамка, расстояние от рамки до основного содержимого. Можно
задать ширину и высоту элемента или оставить определение этих величин за браузером.
Начальная точка элемента всегда находится в левом верхнем углу
11361 Управление элементом
Составляющие элемента
У HTML-элемента есть четыре стороны:
левая, правая, верхняя и нижняя (рис. 5.1).
Они являются составляющими элемента,
и к ним можно применять CSS-свойства.
У каждой стороны элемента есть следую-
щие свойства:
ширина и высота (width, height) - дли-
ны сторон элемента. Ширина относит-
ся к верхней и нижней части, а высо-
та - к левой и правой стороне. Длина
параллельных сторон (левая/правая
и верхняя/нижняя) одинакова. Если вы
не определите ширину и высоту эле-
мента, это сделает браузер (см. следую-
щий раздел);
поле (margin) - пространство между
рамкой и элементом и другими элемен-
тами окна (см. раздел «Поле элемента»);
рамка (border) - линия, очерченная вок-
руг элемента. Рамка остается невидимой
до тех пор, пока не определен ее цвет,
ширина и стиль, например сплошная
или пунктирная линия (см. раздел «Рам-
ка элемента»);
• внутренний отступ (padding) представ-
ляет собой пространство между рамкой
и содержимым элемента (см. раздел
«Внутренний отступ»).
Содержимое элемента
В центре элемента находится его содержи-
мое (content). К этой области применяют-
ся все остальные CSS-свойства (шрифт,
текст, цвет, фон и списки). Заметьте, что
свойство «фон» относится и к заполнен-
ной части элемента. Содержимое включает
в себя текст, списки, формы и изображения.
Теги или контейнеры?
Как вы, наверное, заметили, термин
«HTML-тег» часто используется не
только в этой книге, но и в Internet.
В HTML-теге содержатся необходи-
мые «инструкции» для браузера,
определяющие его действия (напри-
мер, тег <blockquote>). У многих тегов
есть закрывающие теги, которые на-
чинаются со слэша (/). Например, тег
</blockquote> является закрывающим
для тега <blockquote>. Появление зак-
рывающего тега означает, что дей-
ствие основного прекращается. Такие
теги называются контейнерами. Но
часто тегом является весь контейнер.
I л | Поля элементов могут «обтекать» другие
элементы, позволяя встраивать их друг в
1----* 1 друга (см. раздел «Свободное положение
элементов в окне» в главе 6).
Изменение внешнего вида элемента 11371
Таблица 5.1. Значения атрибута display
Значение Совместимость
list-item IE5, N6, S1, ОЭ-5, CSS1
block IE4*. N6, S1, ОЭ-5, CSS1
inline IE4*, N6, S1, 03-5, CSS1
table IE5“, N6, S1, 03-5, CSS2
table-cel! IE5*’, N6, S1, 03-5, CSS2
table-footer-group IE5’*, N6, S1, 03-5, CSS2
table-header-group IE5, N6, S1, 0Э-5, CSS1
table-row IE5**, N6, S1,03-5, CSS2
none IE4, N6, S1, 0Э-5, CSS1
* IE5.5 для Windows
* * Только для Mac, не поддерживается
Windows
Изменение внешнего вида
элемента
Все элементы можно классифицировать в
соответствии с их внешним видом - строч-
ные, блоки или замещенные. По умолча-
нию каждый тег имеет стиль, который оп-
ределяет, как он будет выглядеть на фоне
других тегов.
Вы можете использовать атрибут display,
чтобы указать, должен ли элемент вклю-
чать разрывы строк выше и ниже (блок),
должен ли он включаться в одну строку с
другими элементами (строчный), счи-
таться частью списка или не отображать-
ся вовсе. В табл. 5.1 показаны различные
значения, которые доступны для парамет-
ра display:
inline определяет, является ли тег
строчным тегом, то есть следует ли
удалять разрывы строк сразу после
тега;
block определяет, является ли тег бло-
ком (если да, то разрывы строки поме-
щаются до и после тега);
попе не отображает этот элемент в CSS-
браузерах. У вас будет впечатление, что
данного текста на странице нет;
list-item помещает маркер списка в
первую строку текста, а также разрывы
до и после текста. Эта кодировка по-
зволяет использовать объект в качестве
части списка, даже если вы специально
не применяете тег списка;
11381 Управление элементом
table или любой другой атрибут table,
показанный в табл. 5.1, позволяет вам
преобразовать любой тег в часть табли-
цы данных. К сожалению, использова-
ние этого тега до конца не проработано
в Internet Explorer для Windows, поэто-
му оно может быть ограниченным;
inherit использует набор значений для
родительского элемента.
Создание элемента inline
По определению, элемент inline помеща-
ется в содержимое в одной строке до и пос-
ле него (листинг 5.1 и рис. 5.2). Вы можете
преобразовать любой элемент (включая
абзацы) в теги inline с помощью значения
inline между двумя тегами.
-®. Q.6.______OHTMl |°| vrfrl 1Т«И.г*я М» Вчп»1Ч Haw п ОцрЦу <о> now О
£ « <*> « •
Рис. 5.2. Хотя по умолчанию тег <р> представляет
собой злемент-блок, здесь он настроен как
элемент inline. Поэтому разрыв между
элементом и следующим тегом <р> пропускается
Листинг 5.1. Вы можете использовать параметр
display, чтобы создать элементы, которые будут
перемещаться вместе с разрывами строк. В этом
случае мы изменяем настройки тегов абзацев,
и они перемещаются вместе, а не разрываются
<html>
<head>
cstyle type=”text/css” media="screen"><!-
p.noBreak {
font-weight: bold;
display: inline;
}
-></style>
</head>
<body>
<img src="alice29.gif" height="236”
->width-”200” align="right" border-’'0" />
<p>First came ten soldiers carrying
->clubs...</p>
<p class="noBreak">next the ten
->courtiers... </p>
<p class="noBreak">After these came the
->royal children...</p>
<p>Next came the guests, mostly Kings and
->Queens...</p>
<p>Then followed the Knave of
->Hearts...</p>
<p>last of all this grand procession, came
->THE KING AND QUEEN OF HEARTS.</p>
</body>
</html>
Изменение внешнего вида элемента 11391
QXTMI <о< <Ь» WWW I Т»Шп» tHimnt How <o OigUy
*• * 4 W ..................
ten soldiers
। ten courtiers
royal children
| guests Knave of Hearts
KING AND QUEEN OF HEARTS
I
Рис. 5.3. Все ссылки представляют собой
элементы-блоки, поэтому они отображаются
8 отдельной строке
Как сделать элемент строчным
1. display:
В списке CSS-определений введите па-
раметр display и поставьте двоеточие.
2. inline;
Введите атрибут inline, который опре-
делит, как будет отображаться элемент.
Создание элемента block
Элементы block, которые помещают раз-
рывы строки до элемента и после него, яв-
ляются противоположностью элементов
inline (листинг 5.2 и рис. 5.3).
Листинг 5.2. Вы можете использовать параметр display, чтобы создавать элементы, которые будут
отделяться от других элементов с помощью разрывов строки. В этом примере мы отменим настройки
стиля объекта inline, чтобы создать меню с опциями в отдельных строках
.Лиэтинг^к- г, >. <Z>~]
<html>
<head>
<style type="text/css" media="screen"><!-
a:link.menuLinks {
font-size: 24px;
margin: Юрх;
display: block;
}
-></style>
</head>
<body>
<img src="alice29.gif” height=”236” width=”200” align=”right" border=”0" /Ха class=
-XmenuLinks” href="(EmptyReference! )”>ten soldiers </a><a class="renuLinks”
->href=”(EmptyReference!}">ten courtiers </a><a class=”menuLinks" href=”(EmptyReference!)">
->royal children </axaclass=”menuLinks’’ href=”(EmptyReference! )”>guests Knave of Hearts
-></a><a class=”menuLinks"href=”(EmptyReference!)”>KING AND QUEEN OF HEARTS</a>
</body>
</html>
|14O| Управление элементом
Как сделать элемент блоком
1. display
В списке CSS-определений введите па-
раметр display и поставьте двоеточие.
2. block;
Введите атрибут block, который опре-
делит, как будет отображаться элемент.
Создание элемента,
который не отображается
Хотя на первый взгляд значение попе мо-
жет показаться бесполезным, в действи-
тельности этот атрибут является одним
из самых важных атрибутов CSS, который
мы будем применять для DHTML. Изме-
нив параметр отображения любого эле-
мента на попе, а затем обнулив значение с
помощью JavaScript, мы можем создать
ряд полезных опций интерфейса (лис-
тинг 5.3 и рис. 5.4).
Как отменить
отображение элемента
1. display:
В списке CSS-определений введите па-
раметр display и поставьте двоеточие.
2. попе;
Введите атрибут попе, который опреде-
лит, как будет отображаться элемент.
Листинг 5.3. Вы можете использовать параметр
display, чтобы создавать элементы, которые
не будут (изначально) отображаться на web-
странице. Кодировка, тем не менее, останется
на месте. В этом случае мы скрываем все теги
изображения с помощью класса noShow
9&Q . ......... Листинг.. ..........
<html>
<head>
<style type="text/css" media=”screen”><!-
img. noShow {
display: none;
}
-></style>
</head>
<body>
<img class-"noShow" src=”alice29.gif"
->height=”236” width="200’’ align="right”
->border=’’0” />
<p>First came ten soldiers carrying
->clubs... </p>
<p>next the ten courtiers...</p>
<p>After these came the royal children...
-></p>
<p>Next came the guests, mostly Kings and
->Queens...</p>
<p>Then followed the Knave of
->Hearts...</p>
<p>last of all this grand procession, came
->THE KING AND QUEEN OF HEARTS.</p>
</body>
</html>
Рис. 5.4. Элемент не будет отображаться
Изменение внешнего вида элемента 11411
Листинг 5.4. Вы можете использовать параметр
display, чтобы преобразовать абзацы
в пронумерованный список, который показывает
количество участников в королевской процессии
Листинг о~|
<html>
<head>
<style type 1 text/css" media="screen"><!-
.list {
display, list-item; }
-></style>
</head>
<body>
<img sг:•-"aIicf-29.gif" height="23G"
->width= 200' align-"right"
->bordei -"0">
<ol>
<p class-'list' >First came ten
->soldit’is carrying clubs...</p>
<p class="list ">next the ten
->court:urs </p>
< p clas:;-"iist' >After these came the
->royal children. .</p>
< p class='list"-Next came the guests,
~>mostl'. Kings and Queens • </p>
< p class="list >Then followed the
- >Knave of Hearts . .</p>
< p class="list’>last of all this
- >grand procession, came THE KING AND
- >QUEEN OF HEARTS.</p>
</oi>
</body>
</html>
Рис. 5.5. Порядок следования королевской
процессии пронумерован, благодаря чему его
легче проследить
Преобразование элемента
в список
HTML предлагает несколько тегов для со-
здания списка, но бывают случаи, когда
вам приходится использовать стандарт-
ный HTML-тег в качестве части списка
(листинг 5.4 и рис. 5.5).
Как сделать элемент
частью списка
L display:
В списке CSS-определений введите па-
раметр display и поставьте двоеточие.
2. list-item;
Введите атрибут list-item, который
определит, как будет отображаться
элемент.
I л I Любые элементы с атрибутом попе будут
V просто проигнорированы CSS-браузером.
*---‘ Вам следует осторожно использовать этот
параметр. Хотя попе не является наследо-
ванным атрибутом, он отключает отобра-
жение элемента и всех его подчиненных
элементов.
I л I не нужно путать параметры display и
(j visibility (см. раздел «Определение ви-
'---' димости элемента» в главе 7). В отличие от
атрибута visibility, который оставляет
пространство для элемента, параметр
display: none: полностью удаляет элемент
со страницы (при этом сам элемент по-преж-
нему продолжает загружаться).
1 С помощью JavaScript вы можете создать
I Ц простое раскрывающееся меню. Для этого
'---1 переключите значения атрибута display
между inline и попе, чтобы опции меню
появлялись и исчезали.
11421 Управление элементом
Ширина и высота
элемента
С помощью свойств width и height можно
определить ширину и высоту замененных
элементов и элементов блок-уровня (см.
раздел «Типы HTML-тегов» в главе 1).
Обычно браузер автоматически определя-
ет ширину и высоту элемента. По умолча-
нию ширина совпадает с максимально до-
пустимой, а высота может быть сколь
угодно большой. Однако можно использо-
вать CSS, чтобы установить оба эти свой-
ства (листинг 5.5 и рис. 5.6).
Определение ширины элемента
1. width:
В списке CSS-определений напишите на-
звание свойства width и поставьте двое-
точие.
0 0 0 DHTML for tht WWW 1 Setting ih« Width and Height » Hi Q ;
4» «а > Ю «
Рис. 5.6. Установлены ширина и высота
изображения (которое выглядит неестественно
сжатым) и текста. Форма элемента согласуется
с шириной и высотой, а для текста, по-аидимому,
определена лишь ширина. Если вы не зададите
свойство ove г flow, высота будет проигнорирована
Листинг 5.5. Определить ширину и высоту можно с помощью различных единиц. Обычно для этого
используются пиксели, но допустимы сантиметры, миллиметры, дюймы и пункты
•ее «iaKUU-jpreltiUSei'iUiHtlt.tHKStHMetmKtKawJhKTMHr It...*.,
<html>
<head>
«style type-’text/css" media="screen"><!-
textarea {width: 225px;height: 100px;)
img {float. left;width: 5cm; height: 8cm;}
.copy {float: left;width: 225px;height: 100px;}
-></style>
</head>
<Oody>
«form action=’'#" method=’'get’’>
«textarea rows="4" cols=’’40”>Alice remained looking thoughtfully at the
->musnroom for a minute...«/textarea>
«/form>
<img src=''aliceli gif" />
«p class="copy">Alice remained looking thoughtfully at the mushroom for a minute...</p>
«/body>
</html>
Ширина и высота элемента |143|
Таблица 5.2. Возможные значения свойства width
Значение Совместимость
<leogth> JE4, N4, CSS1
<percentage> IE4, N4, CSS1
auto IE4, N4, CSS1
Таблица 5.3. Возможные значения свойства
height
Значение Совместимость
<length> IE4, N6, CSS1
<ре rcent age> IE4, N6, CSS1
auto IE4, N6, CSS1
ГТ") С помощью свойств width и height изме-
у няют размер изображения (GIF или JPEG),
।। определенный в теге <img>. Скорее всего,
изображение сильно исказится, но иногда
таким образом можно добиться неплохого
результата.
ЕПри помощи свойств width и height под-
держивается размер форм и кнопок.
ГТ"] Вы можете установить свойство height для
у любого элемента, но оно будет использо-
*—' ваться только в замененных тегах (см. раз-
дел «Типы HTML-тегое» в главе 1). Другие
теги проигнорируют зто свойство, если
только вы не определите поведение пере-
крываемого содержимого элемента.
Е Internet Explorer и Netscape понимают ве-
личину auto width по-разному. Internet
Explorer растягивает элемент до границы
с его родительским элементом, a Netscape -
на ширину содержимого.
ГТП При определении ширины элемента в Net-
Il scape 4 возникают ошибки. Если содержи-
I-—J мое элемента не заполняет все простран-
ство, то независимо от установленной ши-
рины Netscape использует величину auto.
2. 225рх;
Чтобы указать ширину элемента, исполь-
зуйте следующие значения (табл. 5.2):
- длину;
- процентную величину, которая оп-
ределяет ширину элемента по отно-
шению к ширине родительского
элемейта;
- auto. Ширина элемента задается брау-
зером. Обычно это максимальная
длина, на которую можно растянуть
элемент, чтобы он не вышел за края
окна или родительского элемента.
Определение высоты элемента
1. height:
Напишите название свойства height и
поставьте двоеточие.
2. ЮОрх;
Чтобы указать высоту элемента, исполь-
зуйте следующие значения (табл. 5.3):
- длину;
- процентную величину, которая опре-
деляет высоту элемента по отно-
шению к высоте родительского эле-
мента;
- auto. Высота элемента задается брау-
зером. Она может быть сколь угодно
большой в зависимости от размеров
содержимого элемента.
11441 Управление элементом
Настройка максимальной/
минимальной ширины и высоты
(только для Mozilla)
Браузеры, построенные на базе Mozilla
(Netscape 6+, Firebird и Camino), а также
Opera и Safari (но не Internet Explorer) име-
ют встроенную С552-функцию, которая
позволяет настраивать максимальную и
минимальную ширину и высоту элемента.
Эта функция может быть очень полезна
при создании объектов, которые никогда
ие будут становиться чрезмерно крупны-
ми в больших сценах (листинг 5.6).
Как настроить максимальную и
минимальную ширину
1. max-width : бООрх;
Введите параметр max-width, двоето-
чие и соответствующее значение по
ширине (табл. 5.4). Независимо от
ширины окна браузера ширина эле-
мента не будет превышать указанного
значения (рис. 5.7).
Листинг 5.6. Вы можете настроить максимальную
или минимальную ширину (и высоту) элемента,
чтобы разрешить ему изменять размеры только
в указанных пределах. В этой кодировке
минимальное и максимальное значение
используется с классом, который был применен
к тегу <body>
<html>
<head>
<style type=’’text/css" media="screen”><! -
.stretchADility {
max-width: 600px;
min-width: 400px;
}
-></style>
</head>
<Dody class="stretchAbility”>
<p>’How queer it seems,’ Alice said to
->herself...</p>
</body>
</html>
Таблица 5.4. Максимальные и минимальные
значения по ширине
Значение
Совместимость
<length> N6, S1, 05, CSS2
<percentage> N6, S1, 05, CSS2
auto N6, S1, 05, CSS2
»06
Рис. 5.7. Несмотря на увеличение окна браузера,
ширина элемента не превышает 600 пикселей
Ширина и высота элемента
; © О © CSS + DHTML | Minimum Width (М Q
4 : (й> * ]
'How queer it seems,' Alice said to herself, ‘to be going гт
I rabbit! I suppose Dinah ll be sending me on messages next
| began fancying the sort of thing that would happen: “MfeJ
i here directly, and get ready for your walk!" 'Coming bar
1 But I've got to see that the mouse doesn't get out." Only I
I Alice went on, that they'd let Dinah stop in the house if i
I ordering people about like that!'
| By this time she had found her way into a tidy tittle room
in the window, and on it las she had hoped) a fan and two
pairs of tiny white kid gloves: she took up the fan and a p<
gloves, and was just going to leave the room, when her ey
little bottle that stood near the looking- glass. There was;
time with the words DRINK ME,' but nevertheless she unc
put it to her lips I know SOMETHING interesting is sure d
she said to herself, 'whenever I eat or drink anything; so I
what this bottle does. I do hope itll make me grow large I
really Гт quite tired of being such a tiny little thing!'
It did so indeed, and much sooner than she had expected;
hid drunk half the bottle, she found her head pressing ag
ceiling, and had to stoop to save her neck from being
hastily put down the bottle, saying to herself That’s
hope I shan't grow any more -As it is, I can't get out at
wish I hadn't drunk quite so much!' I
w; f -.....' —TiTrj
quit J
2. Tin-widtrr 400рх;
Введите параметр min-width, двоето-
чие и соответствующее значение по
ширине (табл. 5.4). Независимо от ши-
рины окна браузера ширина элемен-
та не будет меньше указанного значе-
ния (рис. 5.8).
Е Параметры max-neight и min-height дей-
ствуют примерно также, но зависят от ото-
бражаемого содержания, а не от размеров
окна браузера (табл. 5.5);
I -И Очевидно, что вам не нужно включать од-
(j I повременно и минимальное, и максималь-
1----1 ное значение.
Рис. 5.8. Несмотря на то, что ширина окна
браузера намного меньше, ширина элемента
не становится меньше, чем 400 пикселей
Таблица 5.5. Максимальные и минимальные
значения по высоте
Значение Совместимость
cleng t h> N6. S1, 05, CSS2
<ре rcentage> N6, S1, 05, CSS2
auto N6, S1, 05, CSS2
11461 Управление элементом
Поле элемента
С помощью свойства margin определяет-
ся пространство между элементом и со-
седними элементами в окне. Для этого
необходимо указать от одной до четырех
величин (листинг 5.7), которые соответ-
ствуют всем сторонам элемента одновре-
менно (парам «левая/правая» и «верхняя/
нижняя») или каждой стороне в отдель-
ности (рис. 5.9).
Определение полей элемента
1. margin:
В списке определений напишите назва-
ние свойства margin и поставьте двое-
точие.
2. 5ет;
Чтобы указать размер поля, воспользуй-
тесь следующими значениями (табл. 5.6):
- длиной;
- процентной величиной, которая
определяет поле по отношению к
ширине родительского элемента;
- auto. Размер поля задается браузером.
Листинг 5.7. Поля можно устанавливать как
в одном определении, так и в разных. В этом
примере каждое поле указывается отдельно.
В определение можно внести и стороны элемента
Л ЛИСГМНПг Ql
<html>
<head>
<style type='‘text/css">
p.paragraphtwo {margin: 5em;}
h2 {margin: lem;}
p.copy {
margin-top: 5em;
margin-bottom: 10%;
margin-left: 8em;
margin-right: 2OOpx; }
</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="paragraphtwor'>The table was a
large one...</p>
</body>
</html>
Поле элемента |147|
Д Q Q DHTML for <h« WWW I Swing an Eltmtnti M«rglns
CHAPTER VII
A Mad Tea-Party
[DocvntM Oom
Рис. 5.9. Поля первого текстового блока
определены по отношению к рабочей области
экрана
Таблица 5.6. Возможные значения свойства
margin
Значение Совместимость
<length> IE3, N4, S1, ОЭ-5, CSS1
(percent age> IE3, N4, S1,03-5, CSS1
auto IE3, N4, S1, 03-5, CSS1
ЕПоле с каждой стороны можно указать
независимо от других.
И Следует осторожно определять отрица-
тельные поля вокруг ссылки. Если поле
какого-либо элемента заходит на ссылку,
она не будет работать.
। _ । Поля также можно установить в теге <Dody>.
Q Таким образом задается расстояние между
।1 вложенными элементами и верхней и ле-
вой частями окна браузера.
i | в теории это позволит вам центрировать
содержимое страницы путем настройки по-
'----1 лей с двух сторон на auto. Однако эта опция
работает в Internet Explorer для Windows с
ошибками.
ЕПри определении полей с помощью процент-
ных величин нельзя забывать о том, что ре-
зультат зависит также и от размера окна
пользователя. То, что хорошо смотрится при
разрешении 640x480, может выглядеть пло-
хо на экране большего размера.
ИВ Netscape 4 возникает ошибка: все эле-
менты с полями работают как теги блок-
уровня (см. «Типы HTML-тегов» в главе 1).
11481 Управление элементом
Отрицательные поля
Отрицательные поля можно использовать
для получения интересных результатов,
например перекрывания частей текста. Од-
нако этот метод не всегда хорош, так как
различные браузеры работают с ним по-
разному.
margin: -5em;
Чтобы получить эффект перекрывания
текста, лучше всего воспользоваться CSS-
позиционированием (см. главу 6).
Поле с одной стороны
Если вы хотите определить несколько по-
лей, можно указать от одного до четырех
значений, разделив их пробелами:
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.
Отрицательные поля
Будьте внимательны при настройке
отрицательных полей для гиперссыл-
ки. Если поля одного элемента закры-
вают ссылку, она будет работать не-
правильно.
Рамка элемента |149|
Листинг 5-8. Все атрибуты рамки для четырех
сторон можно указать в одном определении
или отдельно
<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; }
</sty le>
</head>
<body>
<div class='frame"><img
->scr="alicel4.gif"></div>
<p>This time Alice waited patiently
->until it chose to speak again...</p>
</body>
</html>
Рамка с одной стороны
Свойства рамки можно установить
отдельно для каждой стороны:
border-top: 1mm dotted #990000;
border-bottom: Зрх dashed #990000;
border-left' 3pt solid #990000;
border-right: 2pc inset #990000;
Рамка элемента
С помощью свойства border можно одно-
временно определить все атрибуты рамки
для четырех сторон элемента (лис-
тинг 5.8). Свойство border используется
для установки ширины, стиля и/или цвета
рамки (рис. 5.10). Допустимо также задать
рамку для каждой стороны в отдельности.
Document: Done
Рис. 5.10. Картинка окружена рамкой, стороны
которой различны. Текст обведен двойной
рамкой
Этот метод больше всего подходит
для замены значений, установлен-
ных в свойстве border.
К сожалению, Netscape 4 не поддер-
живает эти свойства. Для каждого
стиля нужно определять свойства от-
дельно (см. следующий раздел).
11501 Управление элементом
Установка рамки
1. border.
В списке CSS-определений напишите
название свойства border и поставьте
двоеточие.
2. double
Укажите стиль рамки. В табл. 5.7 пере-
числены все доступные стили. Если вы
не хотите, чтобы у элемента была рам-
ка, введите значение попе.
3. 20рх
Укажите значение свойства border-width
и нажмите клавишу пробела. В качестве
значения могут использоваться следую-
щие величины (табл. 5.8):
- длина. Если длина равна 0, то рамка
не появится;
- ключевое слово relative-size, на-
пример thin, medium, thick.
4. #990000,
Укажите цвет рамки. Эта величина мо-
жет быть названием цвета, шестнадца-
теричным кодом или RGB.
® Многие браузеры поддерживают сеойство
border, но не работают с остальными свой-
ствами, определяющими вид рамки.
ЕВ Netscape 4 возникает ошибка: все эле-
менты, у которых есть рамка, работают
как теги блок-уровня (см. раздел «Типы
HTML-тегов» в главе 1).
Таблица 5.7. Возможные значения свойства
border
Значение Совместимость
<border-width> IE4, N4, S1, 03-5, CSS1
<border-style> IE4, N4, S1, 03 5, CSS1
<border-color> IE4, N4, S1, 03 5, CSS1
Таблица 5.8. Возможные значения свойства
border-width
Значение Совместимость
thin IE4, N4.S1, 03-5, CSS1
medium IE4, N4, S1, 03-5, CSS1
thick IE4, N4. S1, 03-5, CSS1
<length> IE4, N4, S1, 03-5, CSS1
Таблица 5.9. Возможные значения свойства
border-style
Значение
Совместимость
None IE4, N4, S1, 0345, CSS1
Dotted IE4*, N6, S1, 0345, CSS1
Dashed IE4*. N6, S1, 0345, CSS1
Solid IE4, N4, S1, ОЭ45, CSS1
Double IE4, N4, S1, 0345, CSS1
Groove IE4, N4, S1, 0345, CSS1
Ridge IE4, N4, S1, 0345, CSS1
Inset IE4, N4, S1, 0345, CSS1
Outset IE4, N4, S1, 0345, CSS1
‘ IE5.5 и IE6 для Windows
Листинг 5.9. Все атрибуты рамки для четырех
сторон можно указать в одном определении
или отдельно
^Листике.
<head>
<style type='text/css">
.frame {
border-style: inset;
border-color: «ffOOOO;
border-width: Юрх; }
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>
Таблица 5.10. Возможные значения свойства
border-color
Значение Совместимость
<color> IE4, N4, S1, 03-5, CSS1
transparent IE4, N4, S1, 03-5, CSS1
inherit IE4, N4, S1,03-5, CSS1
Рамка элемента 11511
Атрибуты рамки
Атрибуты рамки (стиль, цвет и ширина)
определяются при помощи свойства border
(см. предыдущий раздел). Однако каждый
из этих атрибутов можно указать отдельно
для элемента (листинг 5.9 и рис. 5.11) и
даже для одной стороны (рис. 5.12).
Украшение границы
1. border-style: inset;
Добавьте параметр border-style с од-
ним из следующих значений:
- имя стиля из табл. 5.9;
- попе (граница не будет отображаться);
- inherit (будет использоваться значе-
ние параметра border-style роди-
тельского элемента).
2. border-color: SffOOOO;
Добавьте параметр border-color с од-
ним из следующих значений:
- значение цвета, то есть цвет, кото-
рый вы желаете использовать для
границы (табл. 5.10). Это значение
может быть именем цвета, значе-
нием в шестнадцатеричном форма-
те или RGB-значением (см. раздел
«Значения и единицы измерения»
во введении);
- transparent (фон будет прозрачным,
что позволит увидеть цвета, которые
располагаются за элементом);
- inherit (будет использоваться значе-
ние параметра border-color роди-
тельского элемента).
1152| Управление элементом
3. border-width: Юрх;
Добавьте параметр border-width с од-
ним из следующих значений (табл. 5.8):
- ключевое слово: thin, medium или
thick;
- значение по длине (length): если дли-
на равна 0, то граница не появится;
- inherit (будет использоваться зна-
чение параметра border-width роди-
тельского элемента).
I Л | Необязательно включать в определение
I U I все атрибуты рамки. Если вы не введете
1----1 какое-либо значение, оно будет установле-
но по умолчанию (см. приложение С).
®В Netscape 4 возникает ошибка: все элемен-
ты с рамкой функционируют как теги блок-
уровня (см. раздел «Типы HTML-тегов»
в главе 1).
Q Q 8 DHTML for the WWWCD
fg ф fl»
Alice was not a bit hurt, and she
jumped up on to her feet in a
moment: she looked up, but it was
all dark overhead; before her was
another long passage, and the
White Rabbit was still in sight,
hurrying down it. There was not a
manent to be lost: away went Alice
like the wind, and was just in time
to hear it say, as it turned a corner,
'Oh my ears and whiskers, how late
it’s getting!' She was close behind it
when she turned the corner, but
the Rabbit was no longer to be
seen: she found herself in a long,
low hall, which was lit up by a row
of Lamps hanging from the roof.
Document: C 0 /л
Рис. 5.11. Атрибуты рамки разные, но их общий
вид совпадает
Рис. 5.12. На самом деле рамка выглядит весьма
красиво, но это трудно оценить на черно-белом
рисунке
Рамкаэлемеита 11531
Создание и украшение границы
для одной стороны
Вам совершенно необязательно создавать
одинаковую границу для всех четырех
сторон.
Вы можете настроить границы независи-
мо от стиля, заданного для них. CSS дает
вам свободу в настройке внешнего вида
для границы с любой стороны.
Допускается устанавливать разные атрибу-
ты рамки для сторон элемента. С помо-
щью CSS можно определять вид рамки
последовательно:
border-style: ridge double dotted dashed;
border-width: 20px 15px 10px 5px;
border-color: red green blue purple;
Чтобы задать свойства рамки отдельно
для каждой стороны, нужно написать от
одного до четырех значений:
одно значение устанавливает ширину
рамки для всех четырех сторон;
два значения указывают ширину рам-
ки для верхней/нижней и левой/пра-
вой сторон;
три значения определяют ширину рам-
ки для верхней, левой и правой/нижней
стороны соответственно;
четыре величины описывают ширину
рамки для каждой стороны отдельно:
верхней, правой, нижней, левой. ,
1
11541 Управление элементом
Последняя опция настройки границы для
одной стороны (как будто вам нужна еще
одна опция) представляет собой комби-
нирование двух описанных ранее методик.
С помощью этой опции вы сможете созда-
вать специфический тип стиля (стиль, ши-
рина, цвет) для одной стороны (сверху,
снизу, слева, справа):
border-top-style: ridge;
border-top-width: 20px;
border-top-color: red:
Создание углов округлой формы
(только для Mozilla)
Допустим, вас не устраивают прямые
углы, но вы не желаете изменять последо-
вательность графических элементов и со-
здавать границы. Для этого браузеры, ра-
ботающие на базе Mozilla (Netscape 6+,
Firebird и Camino), имеют функцию, кото-
рая с помощью CSS позволит вам настро-
ить радиус углов для границ (рис. 5.13).
Эта функция Netscape не входит в офици-
альную спецификацию CSS и не поддер-
живается Internet Explorer, Safari и Opera,
но может быть очень полезной и не влия-
ет на то, как будут показываться границы
в других браузерах.
^ее CSS & DHTML far the WWW 1 RoundingO-
It was the (White Rabbit"!, trotting slowly back again, and
I looking anxiously about as tt went, as if it had lost
i 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
I ferretsi Where CAN I have dropped them. I wonderf
! Alice guessed in a moment that it was looking for the fan
and the pair of white kid gloves, and she very
good-naturedly began hunting about for them, but they
were nowhere to be seen-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.
Very soon the (Rabbtfi noticed Alice, as she went hunting
about, and calledoH to her in an angry tone, 'Why,
Mary Ann, what ARE you doing out here? Run home this
moment, and fetch me a pair of gloves and a fan! Quick,
now!' And Alice was so much frightened that she ran off
at once in the direction it pointed to, without trying to
explain the mistake tt had made.
'He took me for his housemaid,' she said to herself as she
I ran. 'How surprised he'll be when he fbds out who I am!
; But fd better take him his fan and gloves-that is, if I can
j find them.' As she said this, she came upon a neat little
! house, on the door of which was a bright brass plate with |
i the name ^f-_RABBlT^ engraved upon tt. She went in p»
; without knocking, and hurried upstairs, in great fear lest If
| she should meet the real Mary Ann, and be turned out
; file://localhost/Usersfjason/Doci 0/
Рис. 5.13. В Camino (одном из браузеров,
работающих на базе Mozilla) граница ссылки
на странице имеет круглые углы, которые
отличаются от обычных прямых углов
Рамка элемента 1155 |
Листинг 5.10. Создайте границу и примените
атрибут настройки радиуса (Mozilla), чтобы
округлить углы В этой кодировке были округлены
углы границы, которая используется для
гиперссылок. Эта кодировка может
использоваться только браузерами, работающими
на базе Mozilla
fc-gft.! . . Листинг .О|
<ntml>
<head>
<style type=”text/css" media="screen”><'-
a:link.rcindedCorners {
margin 0,
padding 0 2px:
border solid 1px #f33;
-moz-Dutder-radius 50%:
}
a:hover roundedCorners {
backgruund-color. sfcc:
margin 0,
padding 0 2px:
border solid 1px efOO;
-moz-border-radius: 50X;
}
-></style
</head>
<body>
<p>It was the <a class-’roundedCorners"
->href="http.//www. rabbit.com”>White
->Rabbit</,i>, trotting slowly back
->again.. <./p>
<p>Very soon the -a class=”roundedCorners"
-> href= http //www.rabbit: com”>Rabbit
-></a> noticed Alice...</p>
<p>”He tojk me for his housemaid,' she
->said to heiself as she ran. ‘'How
^surprised he'll be when he finds out
->who I am' But I'd better take him his
->fan and gloves-that is, if I can find
->them.'As she said this, she came upon a
->neat little house, on the door of
->wtiich was a bright brass plate with the
->name ”<a class=”roundedCorners”
->href=''http'//www. rabbit - COm”>W. RABBIT
-></a>’ engraved upon it...</p>
</body>
</html>
Создание округлых углов
в браузерах Mozilla
1. border: solid 1px #f33;
Настраивает границу для элемента с
помощью одной из ранее описанных
методик (листинг 5.10).
2. -moz-border-radius:
После определения границы введите
параметр -moz-border-radius и двоето-
чие.
3. 50%;
Введите значение для параметра border-
radius и двоеточие. Значение может
быть следующим (табл. 5.11):
- значение по длине (length), которое
задает радиус воображаемой окруж-
ности угла. Значение используется
для создания округлого угла. Чем
больше значение, тем более округ-
лым будет угол;
- процент (от 0% до 50%) использует
размер элемента для настройки ра-
диуса угла. Более высокое значение
делает угол более округлым. Если
значение равно 50%, угол приобре-
тает форму полуокружности.
Е Проблема с использованием данной функ-
ции заключается в том, что браузер не мо-
жет исправлять углы, поэтому вместо плав-
ных мы получаем угловатые кривые.
Таблица 5.11. Значения параметра
-moz-border-radius
Значение Совместимость
<length> N6
<percentage> N6
11561 Управление элементом
Округление углов для одной стороны (только для Mozilla)
Помимо одновременной настройки углов для всех четырех сторон вы можете отдель-
но настроить радиус углов для каждой стороны, используя одну из двух методик.
Первый способ подразумевает использование параметра -moz-border-radius со
значениями (от одного до четырех), которые разделены пробелами:
-moz-border-radius: 5рх Орх 50% 0%;
одно значение задает радиус для всех четырех углов;
два значения задают радиус для верхнего левого / нижнего правого и нижнего
левого / верхнего правого углов;
три значения задают радиус для верхнего левого, нижнего левого / верхнего
правого (одно и то же) и нижнего правого углов;
четыре значения задают радиус для каждого угла по отдельности в следующем
порядке: верхний левый, верхний правый, нижний правый и нижний левый.
Вы также можете по отдельности задать значения радиуса углов для каждой границы:
- moz-bordeг - radius-topleft: 5px:
- moz-border-radius-topright: Opx;
- moz-border-radium-bottom right: 50%:
- moz-border-radius-bottomleft: 0%;
Этот метод особенно полезен для изменения параметров границы, настроенных
с помощью атрибута -moz-border- radius.
Внутренний отступ
[157|
Листинг 5.11. В зависимости от того, с какой
стороны требуется пустое пространство, можно
использовать одно, два, три или четыре значения
<html>
<head>
<style type= ’text/css">
.chpttitle {
padding: 10% 1cm 10px 5em;
border: dashed silver ipx;
}
img {
padding-top. 25px;
}
--></style>
</head>
<body>
<h3 class=”chpttitle">CHAPTER 4<br>
The Rabbit Sends in a Little Bill</h3>
<p><img scr="alicel2.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>
Внутренний отступ
Может показаться, что внутренний отступ
(padding) и определение полей приводят к
одному и тому же результату - появляется
свободное пространство вокруг содержи-
мого элемента. Разница же заключается в
том, что внутренний отступ располагается
между содержимым элемента и рамкой,
а не между различными элементами на эк-
ране (листинг 5.11 и рис. 5.14).
вОв DHTML for the WWW I Setting an Elements Pa Q .
4: до •&. 4? <5
I
CHAPTER IV
The Rabbit Sends In a Little Bill
It was the White Rabbit,
trotting slowly back agam,
and lookbg anxiously about as
it went, as it it had lost
something; and she heard it
muttering to itself The
Duchess! The Duchess! Oh my
dear paws! Oh my fur and
whiskers! Shell get me
executed, as sure as ferrets
are ferrets! Where con I have
dropped them,) wonder?
Alice guessed in a moment
that ft was looking for the fan
and the pair of white kid
gloves, and she very
good-naturedly began hunting
about for them, but they
were nowhere to be
seen--everything seemed to
have changed since her swim
in the pock, vid the great
hall, with the glass table and
the little door, had vanished completely.
Very soon the Rabbit noticed Alice, as she went hunting about
and called out to her h an angry tone, Why. Mary Ann. what are
you doing out here? Run home this moment, vid fetch me a pair
of gloves and a fanl Quick, now!' And Alice was so much frightened
that she ran off at once in the direction it pointed to. without
Document- Done
Рис. 5.14. С помощью указания внутреннего
отступа элемент сдвигается в левый нижний угол.
Рамка определена так, что результат применения
отступа более заметен
11581 Управление элементом
Установка внутреннего отступа
1. padding:
Напишите название свойства padding
и поставьте двоеточие.
2. 10% Юн Юрх 5ет;
Укажи се значение свойства (табл. 5.12):
- одно значение устанавливает внут-
ренний отступ со всех сторон; два —
с верхней/нижней и с левой/правой
сторон; четыре - для каждой сторо-
ны отдельно.
- одно из значений по длине (length),
которое создает точно такой внут-
ренний отступ, как вы указали;
- inherit (будет использовать значе-
ние параметра padding родительско-
го элемента).
И Поля и внутренний отступ легко перепу-
тать. Это происходит из-за того, что ре-
зультат их применения выглядит одинако-
во, если нет рамки. Помните, с помощью
полей элементы отделяются друг от друга,
а отступ образует пространство между со-
держимым элемента и рамкой.
ЕКак и с полями, вы можете ввести одно
значение, которое будет использоваться
для всех четырех сторон: введите два зна-
чения для верхнего/нижнего и левого/пра-
вого отступов, введите три значения для
верхнего, нижнего и левого/правого отсту-
пов, введите четыре значения для верхне-
го, правого, нижнего и левого отступов.
Таблица 5.12. Значения внутреннего отступа
Значение Совместимость
<1ength> IE4, N4, Si, 03.5, CSS1
<percentage> IE4, N4, Si, 03.5, CSS1
Настройка фона |159|
Листинг 5.12. В этом примере изображение,
трое помещается на задний план, определяется
втсге <body>. Изображение фиксируется и не
повторяется
<heaO>
<style type="text/css” media="screen'’><! -
body {
background: white url(alice05. gif)
->no-repeat fixed right top;
)
h3 {
background: #999999 url
->(background.rough.gif) repeat-y
-Heft top;
color, white;
padding: 20px;
width: 60%;
}
P {
width. 60%;
}
-></style>
</head>
<body>
<h3>CHAPTER II<br />
The Pool of Tears</h3>
<p>’Curiouser and curiouser!’ cried
->Alice ..’</p>
</body>
</html>
Настройка фона
HTML позволял нам настраивать цвета
фона и графику практически с момента
своего создания. Стоит отметить, что эта
функция была ограничена: вы могли на-
страивать только фон всей Web-страницы
сразу. Впоследствии появилась возмож-
ность изменять цвет фона для ячеек таб-
лиц, но и она была весьма ограничена.
CSS позволяет вам задавать цвет фона и
графики для любого отдельного элемента
на странице, что дает вам намного больше
возможностей при дизайне Web-страниц.
Чтобы определить цвет фона или помес-
тить картинку на задний план, использу-
ется свойство background. Изменить цвет
фона можно как на всей странице, так
и позади отдельного элемента. Таким же
образом добавляется картинка (рис. 5.15
и листинг 5.12).
ООО DHTMt ftx the WWW I Senins * fcukanmnd Imaae СЭ
Рис. 5.15. Справа появляется фон страницы
(растущая Алиса). У заголовка есть свой фон:
твердая текстура присутствует только слева,
остальная часть выделяется серым цветом
р[60] Управление элементом
Установка фона
1. background:
Введите свойство background и по-
ставьте двоеточие. Укажите значения
свойства background (табл. 5.13).
2. white
Задайте цвет фона (табл. 5.14) и нажми-
те клавишу пробела. Это значение мо-
жет быть названием цвета, шестнадца-
теричным кодом или RGB.
Если вы введете значение transparent,
то браузер выберет цвет, установлен-
ный по умолчанию.
3. urlCaliceO5.gif)
Укажите URL картинки, которую тре-
буется поместить на заднем плане
(табл. 5.15), и нажмите клавишу про-
бела. Путь к файлу с этим изображе-
нием (GIF, JPEG или PNG) может
быть как полным Web-адресом, так и
локальным именем файла.
Вместо URL можно указать значение
попе. В этом случае на заднем плане не
будет картинки.
Таблица 5.13. Значения параметра background
Значение Совместимость
<background-color> IE4, N4, S1, 03.5, CSS1
<background-image> IE4, N4, Si, 0Э.5, CSS1
<background- repeat> IE4, N4, SI, 03.5, CSS1
<Dackground- attachment> IE4, N6, S1, 03.5, CSS1
<Packground- position> IE4, N6, S1, ОЭ.5, CSS1
Таблица 5.14. Значения параметра
background-color
Значение Совместимость
<color> IE4, N4, S1, 03.5, CSS1
transparent IE4, N4, S1, 03.5, CSS1
Таблица 5.15. Значения параметра
background-image
Значение Совместимость
<url> IE4, N4, S1, 03.5, CSS1 .
none IE4, N4, S1, 03.5, CSS1
Настройка фона риГГ]
Таблица 5.16. Значения параметра
backgronn !-г epeat
Значение Совместимость
repeat IE4, N4, S1,03.5, CSS1
repeat - IE4, N4, S1, 03.5, CSS1
repeat-^ IE4, N4, S1, 03.5, CSS1
no-repe,.' 1E4, N4, S1, 03.5, CSS1
Таблица 5.17. Значения параметра background-
attachment
Значение Совместимость
scroll IE4, N6, S1, 03.5, CSS1
fixed IE4, N6, S1,03.5, CSS1
6 0 6 DHTML for the WWW 1 Setting a Background Image CD
£ : (Д) Л <»
Рис. 5.16. Текст переместился, а изображение
на заднем плане осталось на месте
4. no-repeat
Запишите ключевое слово, которое
определяет повторяемость фона, и на-
жмите клавишу пробела. Значения
ключевого слова;
- repeat. Браузер размножит графи-
ческое изображение (табл. 5.16), за-
полнив весь фон элемента;
- repeat-x. Изображение повторяется
вдоль горизонтальной линии, исхо-
дящей из вершины элемента (ось X);
- repeat-y. Изображение дублирует-
ся вдоль вертикальной линии, про-
ходящей по левой стороне элемен-
та (ось Y);
- по-repeat. Изображение появится
только один раз.
5. fixed
Введите ключевое слово, которое опре-
деляет поведение фона при прокрутке
страницы, и нажмите клавишу пробела.
Ключевое слово может быть следую-
щим:
- fixed. Браузер не будет перемещать
фон вместе с остальными элемента-
ми (рис. 5.16);
— scroll. Фон передвинется вместе с
элементом (табл. 5.17).
1162, Управление элементом
6. right top;
Чтобы определить место по отноше-
нию к левому верхнему углу элемента,
где должен появиться фон, укажите две
величины, разделенные пробелом. Они
могут принимать следующие значения
(табл. 5.18):
- ключевое слово положения, напри-
мер left;
- длина, например -1 Орх. Значение мо-
жет быть как положительным, так
и отрицательным. Первое число -
это расстояние от элемента до лево-
го края его родительского элемента.
Второе число задает расстояние от
верхнего края элемента;
- проценты, например 25%. Первое
число определяет горизонтальную
пропорцию по отношению к разме-
ру родительского элемента, вто-
рое - вертикальную.
S Возможность помещать фоновую графику
независимо от текста - мощный инстру-
мент, который используется в дизайне Web-
страницы. Благодаря ему не нужно созда-
вать новые изображения каждый раз, когда
меняется текст. Комбинируя возможности
HTML-текста и графики, вы получите потря-
сающие результаты.
Е Атрибут background позволяет определять
все свойства фона сразу. В следующем раз-
деле рассказывается, как установить каж-
дый атрибут отдельно.
Е Фиксированный фон может быть особен-
но полезен, если вы используете графи-
ческий фон в дизайне страницы, чтобы вы-
делить ее.
Таблица 5.18. Значения параметра background-
position
Значение Совместимость
<percentage> IE4, N6, S1, ОЭ.5, CSS1
clength> IE4, N6, S1, 03.5, CSS1
top IE4, N6, S1,03.5, CSS1
center IE4, N6, S1, 03.5, CSS1
bottom IE4, N6, S1, 03.5, CSS1
left IE4, N6, S1,03.5, CSS1
right IE4, N6, S1, 03.5, CSS1
Настройка фона |163]
Рис. 5.17. Все элементы страницы имеют свой цвет
фона. Картинка помещена на розовом фоне. Этот
цвет виден там, где изображение прозрачно
Установка отдельных
свойств фона
Атрибут background позволяет устанавли-
вать все свойства фона сразу (см. преды-
дущий раздел), однако можно определить
каждое свойство отдельно.
Цвет фона
С цветом фона HTML-страницы можно
было работать еще в первых Web-браузе-
рах. CSS позволяет устанавливать цвет
фона не только всей страницы, но и отдель-
ного элемента (листинг 5.13 и рис. 5.17).
Листинг 5.13. Цвет фона страницы - серый. Однако другие CSS-определения (<img>, <ьз>, <р>,
использующие класс сору и highlight) меняют его
<html>
<head>
<style type-"text/css">
body {background-color: ffcccccc:}
img {background-color: #ff9999;}
h3 {position: relative; background-color: #ff9999; layer-background-color:
->#ff9999; padding: 10px;}
p.copy {position: relative; background-color:rbg(1OO%, 100%, 100%);
->layer-background-color: rbg(100%, 100%, 100%); padding: Юрх;}
.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>
11641 Управление элементом
Определение фона элемента
I. background-color•
Напишите название свойства и по-
ставьте двоеточие.
2. ясссссс,
Укажите цвет фона (табл. 5.14). Эта ве-
личина может быть названием цвета,
шестнадцатеричным кодом или RGB.
Если вы хотите использовать цвет, ус-
тановленный браузером по умолча-
нию, введите значение transparent.
ЕПо умолчанию фону элемента присваивает-
ся значение попе. Таким образом, если для
элемента не установить конкретный цвет
фона или не поместить картинку на задний
план, то в качестве фона будет использо-
ваться фон родительского элемента.
Изображение на заднем плане
С помощью CSS можно не только помес-
тить изображение на задний план элемен-
та или сделать фоном страницы, но и
определить его положение на экране, а
также то, каким образом картинка будет
повторяться (листинг 5.14 и рис. 5.18).
Атрибут background (мы обсуждали его
раньше в этой главе) не является един-
ственным способом настройки фонового
изображения.
Помимо обычной настройки фонового
цвета и изображения CSS предлагает вам
большие возможности по настройке точ-
ного расположения фона позади элемента,
направления повтора она (и необходимос-
ти повтора фона). Также вы можете ука-
зать, нужно ли пролистывать фон вместе
с его элементом или сохранять его поло-
жение в окне браузера фиксированным
(рис. 5.19).
Листинг 5.14. В этом примере изображение, которое
помещается на задний план, определяется в теге
<body>. Изображение фиксируется при помощи
отрицательных величин, оно не повторяется, но
может двигаться вверх и влево. В теге <h3>
определяется повторяющееся изображение на
заднем плане заголовка. Расстояние между текстом
и картинкой равно 200рх, поэтому текст не
накладывается на картинку
ьее
Листинг и-
<html>
<head>
<style type="text/css' >
body {
background-image: url(alice05.gif);
background-repeat: no-reapeat;
background-attachment: fixed:
background-position: -Юрх -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>
Настройка фона р!65]
Рис. 5.18. Изображение, помещенное на задний
план, появляется слева, а текст сдвигается вправо
Рис. 5.19. Текст переместился, а изображение
на заднем плане осталось на месте
Определение положения картинки
на заднем плане
1. background-image: url(alice05.gif);
Напишите название свойства background-
image и укажите URL, определяющий
путь к файлу с картинкой (GIF, JPEG,
PNG). Путь может быть как полным
Web-адресом, так и локальным име-
нем файла.
Если вы не хотите использовать гра-
фическое изображение, вместо URL
введите значение попе (табл. 5.15).
2. background-repeat: no-repeat;
Укажите свойство background-repeat
и поставьте двоеточие. Чтобы опре-
делить повторяемость фона, задайте
одно из следующих ключевых слов
(табл. 5.16):
- repeat. Сообщает браузеру, что он
должен располагать графику по фону
элемента в горизонтальном и верти-
кальном направлении;
- repeat -х. Изображение повторяется
вдоль горизонтальной линии, про-
ходящей по вершине элемента;
- repeat-y. Изображение дублируется
вдоль вертикальной линии, прохо-
дящей по левой стороне элемента;
- no-repeat. Изображение появится
только один раз.
3. background-attachment: fixed;
Введите атрибут background-attachment
и поставьте двоеточие. Чтобы опреде-
лить положение фона при прокрутке
страницы, выберите одно из следую-
щих ключевых слов (табл. 5.17):
- fixed. Браузер не будет перемещать
фон вместе с остальными элемен-
тами;
11661 Управление элементом
- scroll. Фон переместится вместе с
элементом.
4. backgrot.nd-position: -Юрх -5рх,
Напишите название свойства background-
position и поставьте двоеточие. Чтобы
определить место по отношению к лево-
му верхнему углу элемента, где должен
появиться фон, введите две величины,
разделенные пробелом. Они могут при-
нимать следующие значения (табл. 5.18):
- длина, например -Юрх. Значение мо-
жет быть как положительным, так
и отрицательным. Первое число-
это расстояние от элемента до лево-
го края его родительского элемента.
Второе число задает расстояние от
верхнего края элемента;
- проценты, например 25%. Первое
число определяет горизонтальную
пропорцию по отношению к разме-
ру родительского элемента, второе -
вертикальную;
- ключевое слово;
- определения на английском языке:
top, bottom, left, right или center.
Г__ I Иногда повторяющийся фон может появ-
|| ляться в неожиданных местах или распро-
1----1 страняться не в том направлении. С помо-
щью CSS-свойства background-repeat
фоном можно управлять.
ГТ^”1 Проценты и длину допустимо использовать
(j в определении background-position од-
1----1 повременно, однако их нельзя применять
вместе с ключевыми словами.
Е Пространство на заднем плане, на котором
нет картинки, заполняется цветом фона
(см. раздел «Настройка фона»).
Предварительная загрузка изображений
Если на вашем сайте есть графичес-
кие изображения больших размеров,
для ускорения их загрузки можно ис-
пользовать свойство display.
Допустим, на первой странице сайта
размещено мало изображений, но их
много на второй. В этом случае мож-
но включить в первую страницу тег
<img> из второй и установить display:
поле. Изображения загрузятся на пер-
вой странице, но они не будут отобра-
жаться на экране. При появлении в брау-
зере второй страницы эти изображения
загрузятся из кэш-памяти, что гораздо
быстрее.
Однако не переусердствуйте с разме-
щением на первой странице дополни-
тельных изображений, иначе может
случиться так, что на второй странице
появятся лишь частично загруженные
картинки. Используйте только те изоб-
ражения, которые должны появиться
на странице в первую очередь. Тогда
создастся впечатление, что страница
загружается быстро, хотя на ней много
графических объектов.
УПМЦМШ-Е
позмциоимроштм
Одно из препятствий, с которым прихо-
дится сталкиваться Web-дизайнерам, - это
необходимость правильного построения
дизайна страницы с учетом того, что она
не должна загружаться слишком долго.
Графика может добавить текст в дизайн
страницы точно в том месте, где вам она
нужна. Таблицы могут правильно размес-
тить элементы в окне браузера или краси-
во оформить графические объекты. Но
загрузка графики и таблиц занимает боль-
ше времени, чем загрузка обычной HTML-
кодировки, что может существенным об-
разом замедлить загрузку Web-страницы.
Использование CSS для создания Web-
страниц позволяет увеличить эффектив-
ность по сравнению с использованием
графики или таблиц, причем результаты
отображаются намного быстрее.
Кроме того, элементы могут быть «сгруп-
пированы» вместе, что позволяет вам со-
здавать столбцы и другие стандартные
форматы дизайна.
Многие пользователи жалуются на слиш-
ком низкую скорость соединений с Inter-
net Некоторые говорят в шутку, что WWW
означает World Wide Wait - всемирное
ожидание. Одной из причин невысокой
скорости загрузки является использова-
ние графики для создания текста, кото-
рый располагался бы на странице в зап-
ланированных дизайнером местах.
На скорость загрузки страницы влияет
также применение таблиц для распреде-
ления элементов в окне браузера или для
размещения изображений, состоящих из
нескольких отдельных картинок. Для за-
грузки таблицы требуется больше време-
ни, чем для загрузки текста, при форма-
тировании которого не использовались
таблицы. Чем больше таблиц, тем медлен-
нее загружается страница.
CSS позволяет более точно позициониро-
вать элемент и, следовательно, значитель-
но ускорить загрузку страницы.
Вы уже знаете, как с помощью CSS созда-
вать поля и рамки (глава 5). Кроме того,
посредством CSS можно размещать эле-
менты в любом выбранном вами месте
страницы (абсолютное положение) или
задавать местоположение относительно
других элементов на экране (относитель-
ное положение).
В этой главе рассказывается, как с помощью
CSS позиционировать элементы на страни-
це и располагать их друг над другом.
11681 Управление позиционированием
Что такое окно и документ
Web-страница (часто ее называют просто
документ) отображается в окне браузера.
Можно открывать несколько окон, менять
их размер, перемещать по экрану и даже
преобразовывать в более маленькие окна,
называемые фреймами (frames). Все, что
вы хотите продемонстрировать посетите-
лю вашей страницы, так или иначе отобра-
жается в окне браузера (рис. 6.1).
В главе 5 подробно рассказывается о том,
из чего состоит окно и окружающее его
пространство, от каких значений зависит
вид той или иной части окна. Чтобы по-
нять, как осуществляется позициониро-
вание, необходимо усвоить следующее:
Окна браузеров и содержащиеся в них до-
кументы имеют три варианта настройки
ширины и высоты, а также четыре вариан-
та настройки положения:
ширина и высота браузера обозначают
размер всего окна, включая кнопки уп-
равления браузера и другие элементы
интерфейса;
ширина и высота области изображе-
ния относятся к области изображения
в браузере. Разумеется, значения этого
параметра всегда меньше, чем размеры
всего окна. Когда мы говорим «окно»,
в общем, мы имеем в виду область
изображения;
ширина и высота документа (иногда
этот параметр называют «ширина и вы-
сота рендерирования») относятся к об-
щим размерам всей Web-страницы. Если
ширина и/или высота документа боль-
ше, чем ширина или высота изображе-
ния, то вы увидите полосы прокрутки,
которые позволяют просмотреть весь
документ;
кнопки позиционирования (слева, ввер-
ху, справа, внизу) используются для
того, чтобы точно указать положение
элемента по отношению к сторонам
документа, родительскому элементу
или обычному положению.
ЕВ главе 11 «Среда, в которой вы работае-
те» мы поговорим о том, как использовать
JavaScript, чтобы определить различные
размеры.
I I Обычное положение документа показыва-
I Ij I ет, где именно документ отобразится на
1--1 Web-странице, если к нему не применять
позиционирование.
Что такое окно и документ 11691
6 0 6 DHTML & CSS for the WWW | Understanding the Document an Q
Начало * > . <» >* 4
окна (0,0) * T
Верхнее положение
Действительная
ширина окна
Ширина окна браузера
Рис. 6.1. Окно браузера. Координаты верхнего левого угла
элемента на сером фоне составляют (190рх,1 ЗОрх)
11701 Управление позиционированием
Тип позиционирования
Объявляя атрибуты в селекторе HTML-тега
в CSS, вы определяете содержимое тега как
уникальный объект в окне (см. раздел «Что
такое элемент» в главе 5), которым затем
можно управлять с помощью CSS-пози-
ционирования.
Положение элемента может быть стати-
ческим, относительным, абсолютным или
фиксированным, но в большинстве брау-
зеров доступны лишь три первых вариан-
та (листинг 6.1). Браузер размещает эле-
мент в окне, используя определенный тип
его положения (рис. 6.2).
Статическое позиционирование
По умолчанию все элементы окна имеют
статическое позиционирование, если не оп-
ределено какое-либо другое. Статические
элементы, как и относительные, появляют-
ся в документе друг за другом. Однако ста-
тические элементы отличаются тем, что их
нельзя позиционировать или перемещать.
Относительное позиционирование
Элемент, положение которого определено
как относительное, появится внутри окна
или родительского элемента так же, как
Статический
элемент
Абсолютный
элемент
Относительный
элемент
6 О Q ,____DHTML*CSS forth* WWW I StWng StatK Positioning Q
- Й
----'Oh my ears and t-ibiekers, how late
it' s getting 1 '
—-----------------------------my
'Oh шу ears and
ears
, bow late it's getting!'
and
whiskers,
how
late
it's
getting!'
Рис. 6.2. Позиционирование элементов в окне. Заметьте, что элементы,
находящиеся внутри элемента с относительным положением, размещены
относительно родительского элемента. Таким образом достигается эффект
«лестницы»
Тип позиционирования
ГггГ|
Листинг 6.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
-xspan 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). При движе-
нии элемента вправо увеличиваетсЯзначе-
ние х, а при движении вниз - значение у.
Использование фиксированного
позиционирования
Необходимо помнить, что фиксирован-
ное позиционирование сейчас работает не
во всех браузерах. Эта функция не рабо-
тает в Netscape 6, в Internet Explorer 5 и 6
для Windows. Фиксированное позицио-
нирование работает в Netscape 7, Safari 1,
Opera 5 и Internet Explorer 5 для Mac.
Результат применения фиксированного
позиционирования практически совпадает
с результатом применения абсолютного.
Элемент находится в определенном поло-
жении, он не зависит от других элементов
страницы. Разница же заключается в том,
что при прокрутке страницы фиксирован-
ные элементы остаются на своем месте.
1
11721 Управление позиционированием
Определение положения элемента
1. position:
Напишите в HTML-теге название свой-
ства position в определении правила
или в атрибуте style.
2. relative;
Укажите значение свойства (табл. 6.1):
- static. Статическое позиционирова-
ние; положение элемента нельзя из-
менить с помощью атрибутов top и
left или с помощью JavaScript;
- relative. Элемент располагается от-
носительно родительского, положе-
ние элемента по отношению к обыч-
ному можно изменять посредством
атрибутов top и left или с помощью
JavaScript;
- absolute. Положение элемента в его
родительском не зависит от других
элементов. Если элемент не вложен
в другой, то его положение определя-
ется по отношению к телу документа;
- fixed. Положение элемента в его ро-
дительском не зависит от других
элементов, как и в предыдущем слу-
чае. Но в отличие от элемента с аб-
солютным положением, фиксиро-
ванный элемент остается на своем
месте при прокрутке страницы. Пом-
ните, что значение fixed не поддер-
живается многими браузерами.
3. top: 70рх:
После того как тип позиционирования
установлен, можно задать действитель-
ное положение элемента (см. раздел
«Определение положения по отноше-
нию к правому нижнему углу»).
Элементы можно располагать в поряд-
ке стека:
- stacking order - см. раздел «Элемен-
ты в порядке стека (ЗЭ-позициони-
рование)»;
- определять их видимость (visibility -
см. раздел «Определение видимости
элемента» в главе 7);
- отсекать конкретные части (clipping -
см. «Определение видимой части эле-
мента» в главе 7).
Таблица 6.1. возможные значения свойства
position
Значение Совместимость
static IE4, N4, CSS2
relative IE4, N4, CSS2
absolute IE4, N4, CSS2
fixed IE5* *, CSS2
* Недоступно в Windows
Тип позиционирования 11731
Фиксированное позиционирование
Фиксированное позиционирование
было введено в CSS второго уровня.
Это весьма перспективное направле-
ние, особенно в области разработки
фиксированных меню, всегда доступ-
ных посетителю страницы. Однако
при использовании данного вида по-
зиционирования возникает несколь-
ко проблем:
положение fixed не поддержива-
ется одним из самых популярных
браузеров, Internet Explorer для
Windows. Хотя вы не можете на-
строить два различных типа пози-
ционирования для одного элемен-
та, существует возможность создать
две различные таблицы стилей для
разных браузеров (см. раздел «На-
стройка стилей для OS или браузе-
ра» в главе 16);
Internet Explorer 5 для Мас под-
держивает значение fixed, однако
и здесь возникает ошибка. При про-
крутке страницы ссылки в фикси-
рованном элементе не стоят на мес-
те, то есть графика и текст ссылки
остаются неподвижными, а невиди-
мая область, которая отвечает за
работу ссылки, перемещается. J
ГТ 1 в Internet Explorer нельзя управлять положе-
Ц нием элемента, если он находится в теге
1 । <pody>. Если вы хотите определить положе-
ние тела Web-страницы, заключите ее содер-
жимое в тег <div> и применяйте позициони-
рование к нему.
Г-П Если элемент уже размещен в окне, его
(j можно передвигать, скрывать или отобра-
1----1 жать на экране с помощью JavaScript или
других языков (об этом подробно расска-
зывается во второй части этой книги).
® Netscape Mac/Windows и Internet Explorer
для Windows не поддерживают значение
fixed. Более того, в Internet Explorer для
Мас возникает грубая ошибка, из-за кото-
рой в окне нельзя создать меню.
С1 Если браузер не распознает атрибут fixed,
Ц то по умолчанию выбирается статический
‘ тип позиционирования.
I “ I Если вы имеете представление о слоях Net-
Il scape, то вам должно быть знакомо и пози-
L-—* ционирование. Однако в общем DHTML-брау-
зере для создания слоев используется CSS,
а не тег <1ауег>.
11741 Управление позиционированием
Настройка положения
элемента
Кроме полей, которые вы можете настраи-
вать вместе с параметрами элемента (см.
главу 5), позиционированный элемент мо-
жет иметь значение параметра top, значение
параметра left, значение параметра bottom
и значение параметра right, которые ис-
пользуются для позиционирования эле-
мента по отношению к четырем сторонам.
Настройка положения вверху
и слева
Значения top и left используются для на-
стройки положения элемента по отноше-
нию к верхней и левой границе родитель-
ского элемента (документа или элемента,
в котором находится документ) или по
отношению к обычному положению эле-
мента (рис. 6.3 и 6.4, листинг 6.2).
Определение верхнего и левого
поля
1. position, absolute;
Чтобы установить положение элемен-
та с помощью свойств top и left, нуж-
но включить в то же правило свойство
.position.
2. left:
В списке CSS-определений или в атрибу-
те style в HTML-теге напишите название
свойства left и поставьте двоеточие.
3. 12ет;
Укажите расстояние, на которое вы хо-
тите переместить элемент вправо, ис-
пользуя следующие значения (табл. 6.2):
- длину. Определяется расстояние от
левого края элемента до левого края
окна или родительского элемента;
Листинг 6.2. После выбора типа позиционирования
можно определить расстояние от начала координат
до левой и верхней стороны элемента. Началом
координат для элемента считается левый верхний
угол окна, левый верхний угол его родительского
элемента или его собственный верхний левый угол
<html>
<nead>
<style type=”text/css">
#objectl {
position: absolute;
top: 125рх;
left: 12em;
border: silver solid 2px; }
.changeplace {
position: relative:
top: 1cm;
left: 1cm;
background-color: ffffcccQ; }
</style>
</head>
<body>
<div id="objectT'>
<img scr=“alice27.gif‘ widtn="250"
->neignt="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>
Таблица 6.2. Возможные значения свойств
top и left
Значение Совместимость
<length> IE4, N4, CSS2
<percentage> IE4, N4, CSS2
auto IE4, N4, CSS2
Настройка положения элемента |175|
.«се
t« <
Рис. 6.3. Положение элемента определяется как
абсолютное по отношению к левому верхнему
углу окна, а фраза «clean сир» переместилась
из своего обычного положения вниз и вправо
- проценты, например 55%. Перемеще-
ние задается относительно ширины
родительского элемента;
- auto. Расстояние вычисляется брау-
зером, если элемент является абсо-
лютным. Иначе left приравнивает-
ся к нулю.
4. top:
В списке CSS-определений или в атри-
буте style в HTML-теге напишите на-
звание свойства top.
5. 125рх;
Укажите расстояние, на которое вы хо-
тите переместить элемент вниз, исполь-
зуя следующие значения (табл‘ 6.2):
- длину. Определяется расстояние от
верхнего края элемента до верхнего
края окна или родительского элемента;
- проценты, например 55%. Перемеще-
ние задается относительно ширины
окна или родительского элемента;
@ Q 0_DHTMl * CSS for the WWW I Setting the Left and Top Position of an Element __O
4»! ate « (Д) <•, ______________________________________________________________ e
Верхнее
положение
y=125px
Aire did not wtsti to offend the Dormouse again, so sfle began very
cautiously But I don't understand Where did they draw the treacle
Рис. 6.4. На этом рисунке показано изначальное положение элементов
11761 Управление позиционированием
- auto. Если элемент является абсо-
лютным, то значение перемещения
вычисляется браузером. Иначе top
приравнивается к нулю.
Е Необязательно включать в правило сразу
оба определения left и top.
| Л1 Чтобы перемещать элемент вверх или впра-
(j во, можно использовать отрицательные зна-
1---1 чения
®Если элемент имеет относительное положе-
ние. то при применении свойств left и top
его поля не меняются. Следовательно, опре-
деление левых и верхних полей может при-
вести к тому, что содержимое элемента
выйдет за рамки своего обычного положе-
ния и закроет какой-либо другой элемент.
Г_ 1 Несмотря на то, что свойства left и top не
И I наследуются, вложенные элементы пере-
1---1 местятся вместе с родительским.
Определение положения
по отношению к правому
нижнему углу
Наряду с позиционированием верхней
и левой стороны элемента можно пози-
ционирован. правую и нижнюю сторо-
ны (листинг 6.3).
CSS второю уровня позволяет размещать
элемент относительно его нижнего и пра-
вого края или родительского элемента
(рис. 6.5 и 6.6). В настоящее время эти ат-
рибуты доступны лишь в Netscape 6 и In-
ternet Explorer 5/6.
Листинг 6.3. После того как выбран тип
позиционирования, можно определить расстояние
от начала координат до правой и нижней стороны
элемента. Началом координат для элемента в этом
случае считается правый нижний угол окна,
правый нижний угол его родительского элемента
или его собственный правый нижний угол
606 Листинг .... ~сэ|
<html>
<head>
<style type='text/css">
tfobjecti {
position: absolute;
bottom: 125px;
right: 12ет;
border: silver solid 2px; }
.changeplace {
position: relative;
bottom: 1cm;
right: 1cm;
background-color: ffffcccc; }
</style>
</head>
<body>
<div id="objectl“>
<img scr="alice27.gif' width="250'
->height="225" border='0"
->align-"left">
<p>‘I want a<span
->classs''changeplace"> clean
->cup</span>, ' interrupted the
->Hatter- 'let's all move
->one place on.'</p>
<p>He moved on as he spoke, and the
->Oormouse followed htm...</p>
<p>Aiice didn't wish to offend the
->Dormouse again...</p>
<p>'You can draw water out of a
->water-well...</p>
</div>
</body>
</html>
Определение положения по отношению к правому нижнему углу 11771
Рис. 6.5. Положение элемента определяется как
абсолютное по отношению к правому нижнему
углу окна, а фраза «clean сир» переместилась
из своего обычного положения вверх и влево
Определение нижнего
и правого поля
1. position: absolute;
Чтобы определить положение элемен-
та с помощью свойств bottom и right,
нужно включить в то же правило свой-
ство position.
2. right:
Введите название свойства right и по-
ставьте двоеточие.
3. 12еш;
Укажите расстояние, на которое вы хо-
тите переместить элемент влево, исполь-
зуя следующие значения (табл. 6.3):
- длину. Определяется расстояние от
левого края элемента до правого края
окна или родительского элемента;
- проценты, например 55%. Переме-
щение задается относительно ши-
рины родительского элемента;
BOS DHTML &CSS forth* WWW | Setting IM Hight and BcKtowi Portion of алOemenc C?
4. : *0 I*
Рис. 6.6. На этом рисунке показано изначальное положение элементов
[Л8~| Управление позиционированием
- auto. Значение перемещения вычис-
ляется браузером, если элемент яв-
ляется абсолютным. Иначе right
приравнивается к нулю.
4. bottom:
Введите название свойства bottom и по-
ставьте двоеточие.
Таблица 6.3. Возможные значения свойства
bottom и right
Значение
clength>
<oercentage>
auto
Совместимость
IE5, N6, CSS2
IE5, N6, CSS2
IE5, N6, CSS2
5. 125px;
Укажите расстояние, на которое вы хо-
тите поднять элемент, используя сле-
дующие значения (табл. 6.3):
- - длину. Определяется расстояние от
нижиего края элемента до нижнего
края окна или родительского эле-
мента;
- проценты, например 55%. Перемеще-
ние указывается относительно шири-
ны окна или родительского элемента;
- аи to. Значение перемещения вычис-
ляется браузером, если элемент яв-
ляется абсолютным. Иначе bottom
приравнивается к нулю.
® Netscape и Internet Explorer версии 4 не
поддерживают свойства bottom и right.
Е Свойства left и right можно комбиниро-
вать с bottom и top.
S Каков будет результат, если для одного
элемента установить значения top/left
и bottom/right? Зто зависит от браузера.
В Internet Explorer по умолчанию исполь-
зуются свойства top и left.
® Допустим, определено свойство bottom,
а высота элемента больше высоты станицы.
Обычно нижняя часть элемента «уходит» за
край страницы, и ее можно увидеть, прокру-
тив страницу вниз. Но если не видна верх-
няя часть элемента, таким образом ее уви-
деть не удастся. Поэтому использовать
свойство bottom нужно осторожно.
Элементы в порядке стека (ЗР-позиционирование) [пэ]
Листинг 6.4. Каждый элемент расположен чуть
ниже предыдущего. Свойство z-index
используется для того, чтобы поместить элемент
с номером 1 над элементом с номером 2 и т.д.
<html>
<head>
<style type="text/css‘’>
#elementl {
position: absolute;
z-index: 3;
top: 175рх;
left: 255px; }
#element2 J
position: absolute;
z-index. 2;
top. 100рх;
left. 170px; }
#element3 {
position: absolute;
z-index 1;
top: 65px;
left: 85px; }
#element4 {
position: absolute;
z-index: D;
top- 5px;
left: 5px; }
</style>
</head>
<body>
<span id="element1’'>
<img scr=''alice22.gif" width=”lDD"
->height="i47"><br clear="all">
Element 1
</span>
<span id="element2">
<img scr="alice32.gif" width="140”
->height="2D1"Xbr clear="all">
Element 2
</span>
<span id*"element3">
<img scr='alicei5.gif" width="l50"
->height="l98"Xbr с1еаг=”а1Г‘>
Element 3
</span>
Элементы в порядке стека
(ЗО-позиционирование)
Несмотря на то что экран представляет со-
бой двухмерное пространство, позицио-
нированным элементам можно задать и
третью размерность, го есть расположить
их по отношению друг к другу в порядке
стека.
Позиционируемым элементам в порядке
их появления автоматически присваива-
ется номер: 0, 1, 2, 3,... Номер выбирает-
ся по отношению к родительскому эле-
менту и другим его потомкам. Такая сис-
тема называется z-индекс. Номер z-индекса
элемента определяет его ЗЭ-отношение к
другим элементам окна.
Если элементы накладываются друг на дру-
га, то на переднем плане появляется тот,
чей номер больше.
Обычный порядок элементов на страни-
це можно изменить (листинг 6.4), опреде-
лив свойство z-index (рис. 6.7 и 6.8).
Листинг 6.4 (окончание)
<span id="element4">
<img scr="alice29.gif" width="20D"
->height="236"><br clear="aH“>
Element 4
</span>
</body>
</html>
11801 Управление позиционированием
Определение z-индекса элемента
1. position: absolute;
Чтобы установить уровень элемента
в окне, нужно задать значение свой-
ства position (см. раздел «Тип пози-
ционирования»).
2. z-index:
В том же списке определений напиши-
те название свойства z-index и поставь-
те двоеточие.
3. 3;
Укажите целое число. На этом шаге
определяется z-индекс элемента по от-
ношению к его соседям. 0 означает, что
элемент будет находиться на том же
уровне (табл. 6.4).
Если вы хотите, чтобы z-индекс был
выведен браузером, задайте значение
auto.
4. top: 5рх; left: 5рх;
Установите положение элемента.
® Использование отрицательного z-индекса
приводит к тому, что элемент помещается
на заданное количество уровней вниз от
родительского элемента, а не вверх.
I С помощью JavaScript можно изменить по-
рядок элементов в стеке (см. раздел «Пе-
1---1 ремещение объектов в 3D» в главе 14).
Таблица 6.4. Возможные значения свойства z-index
© © © DHTML A CSS for the WWW | StackingOtmeO
Рис. 6.7. Результат использования z-индекса.
Несмотря на то что элемент 1 должен находиться
внизу, он появляется на переднем плане, так как
его z-индекс равен 3
Значение Совместимость
<numbeг> IE4, N4, CSS2
auto IE4, N4, CSS2
© ©© OKTML & CSS for the WWW | Stacking tlemeQ
Рис. 6.8. Та же самая страница, что и на рис. 6.7,
но здесь не применялось свойство z-index.
Элементы появляются в обычном порядке стека.
Элемент 1 теперь находится внизу, так как его
обычный z-индекс равен О
Свободное положение элементов в окне 1181
BOQ DHTML & CSSfor th« WWW I Wrapping Text Around an Ыеп О
There Kn t ey,' said the March Hare
Свободное положение
элементов в окне
Кроме функции точного расположения
элементов в документе CSS вы можете
настраивать взаимодействие элемента с
другими элементами с помощью опции
свободного положения.
В HTML вы можете использовать пара-
метр align, чтобы текст мог обтекать гра-
фический объект. Но в CSS данное свой-
ство усовершенствовано: текст может об-
текать не только графические изображе-
ния, но и другой текст, а также таблицы
(рис. 6.9). Для этого используется свой-
ство float (листинг 6.5).
Рк. 6.9. Текст располагается вокруг картинки
Листинг 6.5. С помощью свойства float можно определить обтекание текстом как графического
изображения, так и другого текста. В этом примере текст обтекает картинки слева
<html>
<body>
<style type= 'text/css">
img { float: right; }
</style>
</head>
<dody>
<h2>CHAPTER 7<br>
A Mad Tea-Party</h2>
<p class="copy'>There was a table set out...</p>
<lmg 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>
</dody>
</html>
11821 Управление позиционированием
Определение обтекания
в селекторе
1. float:
Напишите название свойства float и
поставьте двоеточие (табл. 6.5).
2. right
Введите ключевое слово, определяю-
щее, по какой стороне экрана вырав-
нивается элемент:
- right. Элемент выравнивается по
правой стороне, причем остальные
элементы обтекают его слева;
- left. Элемент выравнивается по ле-
вой стороне, причем остальные эле-
менты обтекают его справа;
- попе. По умолчанию устанавливает-
ся такое же выравнивание, как и в
родительском элементе.
SB этом примере float применяется к кар-
тинке, это приводит к тому же результату,
что и использование align в теге <img>.
ЕВ главе 17 мы расскажем, как использовать
параметр property, чтобы заменить стан-
дартную таблицу отдельными столбцами.
Таблица 6.5. Значения параметра float
Значение Совместимость
left IE4, N4, CSS1
right IE4, N4, CSS1
none IE4, N4, CSS1
Отмена свободного положения 11831
Рис. 6.10. Текст, который был определен
с помощью класса nowrap, не обтекает картинку,
^начинается после нее
Отмена свободного
положения
Иногда необходимо прервать действие
свойства float (рис. 6.10). Как и атрибут
clear в HTML-теге <br>, CSS-свойство clear
определяет, когда нужно отменить обте-
кание элемента текстом.
Запрет обтекания текстом
1. clear:
Напишите название свойства clear и
поставьте двоеточие (листинг 6.6).
йктинг S.S. Текст, определенный с помощью класса nofloat, появится под плавающими
цементами (в данном примере текст не будет обтекать картинку, а начнется после нее)
ЛИСТИНГ г г -> - о|
<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=”2l9" 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>
11841 Управление позиционированием
2. right
Введите ключевое слово для той сторо-
ны, по отношению к которой вы жела-
ете отменить свободное положение.
Выберите один из следующих пара-
метров (табл. 6.6):
- left. Позволяет отменить свободное
положение для левой стороны пре-
дыдущих элементов;
- right. Позволяет отменить свобод-
ное положение для правой стороны
предыдущих элементов;
- both. Позволяет отменить обтекание
текстом для элементов независимо
от того, для какой стороны было на-
строено свободное положение;
- попе.Позволяетотменитьпрочиена-
стройки параметра clear.
3. <р class="nowrap”>...</р>
Теперь, в каком бы теге вы не примени-
ли этот класс, текст не будет обтекать
другие теги, независимо от того, какое
свойство float было установлено.
Таблица 6.6. Значения параметра clear
Значение Совместимость
left IE4, N4, CSS1
right IE4, N4, CSS1
both IE4, N4, CSS1
none IE4, N4, CSS1
Рекомендуется определять заголовки и на-
звания так, чтобы они не располагались вок-
руг других объектов.
Управление свойствами пробелов 11851
Листинг S.7. В тег <р> добавлено свойство
white-space. pre, в результате все пробелы
отображаются на экране. Но если используется
класс. collapse, пробелы между символами
исчезают
,ЛИСТИНГ, _ .......... ;C?J
<htrnl>
<head>
<style type=”text/css">
p { white-space: pre; }
collapse {white-space: normal;}
</style>
</head>
<body>
<p>A L I С E ’S RIGH
TFOOT, ES Q.</p>
<p class="collapse”>H E
- >A R T H R UG , </p>
< p>(wi т н
- >A L I С E ’
>S L О V E).
<img scr="aliceO8.gif" width="200"
- >height = ’ 13T>
</p>
</body>
</html>
Управление свойствами
пробелов
Многие браузеры раньше заменяли не-
сколько пробелов одним, если не, исполь-
зовался тег <рге>, указывающий браузеру,
что текст уже отформатирован. С помо-
щью CSS можно как запрещать, так и раз-
решать объединение пробелов. Также до-
пускается указывать, когда текст должен
прерываться пробелом, а когда - нет (срав-
ните с HTML-тегом <лоЬг>).
В данном примере (листинг 6.7 и рис. 6.11)
текст с пробелами выглядит не слишком
красиво. Однако они исчезнут, если не
определить атрибут white-space (рис. 6.12).
Рис. 6.11. Использование пробелов позволяет
отображать текст именно так, как вы. хотите.
Заметьте, что пробелы вытеснили картинку
1186 ] Управление позиционированием
Установка свойств пробелов
в селекторе
1. white-space:
В списке CSS-определений напишите
название свойства и поставьте двоето-
чие (листинг 6.7).
2. pre
Чтобы определить способ управления
пробелами в тексте, введите одно из
следующих значений (табл. 6.7):
- pre сохраняет несколько пробелов;
- nowrap не прерывает строку до тех
пор, пока не доходит до тега <Ьг>;
- normal позволяет браузеру опреде-
лять, как управлять пробелами.
Обычно при этом несколько про-
белов преобразуются в один.
| л I Не путайте HTML-теги <nobr> и <рге> со зна-
чениями white-space параметров nowrap
।1 и pre. Хотя, в общем, это одно и то же,
HTML-теги не входят в состав HTML-специ-
фикации, и вам не следует их использовать.
ЕЕсли в теге определено значение nowrap, то
строка не прерывается независимо от шири-
ны экрана. Чтобы прочитать текст, пользова-
телю придется подвинуть страницу, а это не
всем нравится.
Е Значение nowrap удобно в таблицах, если
требуется, чтобы строка в ячейке не пре-
рывалась.
$06 OS WWUSBKl Oi
4» st да м '
»ucfS»iOHirooT.ese.
Рис. S.12. Пробелы исчезают, если стиль
не определен
Таблица S.7. Значения параметра white-space
Значение Совместимость
normal IE5*, N4, CSS1
pre IE5*. N4, CSS1
nowrap IE5*, N6, CSS1
’ IE5.5 и 1Е6 для Windows
УПРЛШШ
WMoauo жмот
7
РИс.7.1. В этой версии свойство visibility
нв определяется. Это значит, что по умолчанию
устанавливается значение visible
Динамический HTML позволяет отобра-
жать и скрывать элементы или их части,
a CSS -устанавливать их видимость (visi-
bility).
Но сначала нужно научится менять види-
мость элемента с помощью JavaScript, ина-
че управление видимостью не принесет
ощутимого результата.
Определение видимости
элемента
С помощью свойства visibility определя-
ется видимость элемента при первом про-
смотре страницы. Если этому свойству
присвоено значение hidden, то элемент не
виден на экране, но занимает в документе
определенное место. На экране область,
занимаемая таким элементом, выглядит
пустой (рис. 7.1 и 7.2).
[ 1861 Управление видимостью элемента
Установка видимости элемента
1. position: relative;
Установите абсолютное или относи-
тельное положение элемента с помо-
щью свойства position (листинг 7.1).
2. visibility:
В CSS-определении элемента укажите
название свойства visibility и посгавь-
тедвоеточие (табл. 7.1).
3. hidden
Введите одно из ключевых слов, задаю-
щих видимость элемента на экране:
- hidden. Элемент становится невиди-
мым, хотя первоначально отобра-
жался;
- visible. Элемент виден на экране;
- inherit. Элемент наследует видимость
своего родительского элемента.
©О © DHTML 4 CSS forth» WWW I Sotting cht Visibility of w Elon Q
; (Л) Л «I
Did you м» 04. or «id the Cal.
Рис. 7.2. На этом рисунке представлен результат
применения кода. Свойству visibility
присвоено значение hidden, а на месте элемента
появляется пустое пространство
Определение видимости элемента 11891
Листинг 7.1. Для класса hide определяется
j свойство visibility, элемент становится
i невидимым
I ,> ДИСТИКх.
<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>
В
На первый взгляд кажется, что свойства
visibility и display похожи, но на са-
мом деле они кардинально отличаются
друг от друга. Если свойству display при-
своена величина попе, то элемент удаляет-
ся из документа и пространство для него
не выделяется.
Е Netscape 4 также позволял вам настроить
видимость элемента с помощью значений
show и hide, но эти параметры не поддер-
живаются более новыми версиями Netscape.
ЕДля определения видимости отдельного эле-
мента, если ее значение visible, рекомен-
дуется указывать элемент с помощью его ID.
Таблица 7.1. Значения параметра visibility
Значение Совместимость
hide hidden N4* IE4, N4, CSS2
show N4*
visible IE4, N4, CSS2
inherit IE4, N4, CSS2
’Только N4, в N6 недоступно
11901 Управление видимостью элемента
Определение видимой
части элемента
Определяя ширину и высоту элемента, вы
управляете его размерами (см. главу 5),
а обрезая элемент (clipping), определяете,
какая его часть будет видна на экране. Ос-
тавшаяся часть не удаляется, она просто ста-
новится невидимой и занимает на экране
определенное место, которое отображается
как пустое пространство (рис. 7.3).
Определение видимой части
элемента
1. position: absolute;
Установите абсолютное или относитель-
ное положение элемента (листинг 7.2).
2. clip:
Введите название свойства clip и по-
ставьте двоеточие.
3. rect(15 350 195 50)
Чтобы определить форму видимой об-
ласти, напишите rect (прямоугольник),
откроите круглые скобки, укажите че-
тыре значения, разделенных пробелами,
и закройте скобки. Числа задают длину
верхней, правой, нижней и левой сторон
видимой области. Эти значения пред-
ставляют собой расстояние от начала
элемента (левого верхнего угла), а не от
какой-либо стороны (рис. 7.4).
Каждое значение может быть числом,
которое переводится в пиксели, или
auto, тогда размер видимой области
определяется браузером (обычно 100%).
В табл. 7.2 перечислены эти значения и
браузеры, которые их поддерживают.
©О© DHTML 4CSS for the WWW! Senina thtVIsiblO
Рис. 7.3. Из всего изображения мы видим только
голову Чеширского кота. Король, Королева
и Джек невидимы
Листинг 7.2. Видимая область определяется
в классе cliplnHalf, который затем применяется
к элементу в HTML-коде
<html>
<head>
<style type="text/css">
.cliplnHalf {
position: absolute;
clip: rect(15 350 195 50);
top: Opx;
left: Opx; }
</style>
</head>
<body>
<div class=”clipInHalf">
<img scr="alice31.gif' width="379"
->height="480" align="left">
</div>
</Pody>
</html>
Определение видимой части элемента
Таблица 7.2. Значения параметра clip
Значение Совместимость
rect(<topl_ength>. <rightLength>, cbottomLeng th>, <leftLength>) IE4, N4, CSS2
auto IE4, N4, CSS2
Верхняя часть
у=15рх
Правая часть
х=35Орх
| л | Вы можете просто отобразить значения па-
|д раметра clip, однако, для сохранения со-
‘----1 вместимости с XHTML вам понадобится ука-
зать, какие единицы вы используете в каче-
стве единиц измерения.
С
с
Вы можете изменить настройки параметра
с помощью DHTML (см. главу 14).
Границы и заполнение пробелами «выреза-
ются» вместе с зпементом.
DHTML & css far the WWW I Sefana the Vis ЫО
Рис. 7.4. Видимая область определяется с
помощью четырех значений, которые указывают
.расстояние до верхней, правой, нижней и левой
сторон злемента
В Netscape при определении видимой об-
ll ласти возникают ошибки сразу в несколь-
----- ких тегах, включая и тег <img>. Поэтому
в таких случаях лучше всего использовать
теги <div> и <span>.
ШВ настоящее время видимые области зле-
мента могут иметь только форму прямо-
угольника, но в дальнейшем в CSS будут
доступны и другие формы.
1192, Управление видимостью элемента
Управление невидимой
частью
Иногда не все содержимое элемента отоб-
ражается на экране. Это происходит в том
случае, когда выделяется видимая область
элемента, у которой ширина и/или высо-
та меньше, чем необходимая для элемен-
та область. С помощью свойства overflow
можно определить, каким образом будет
работать браузер с этой не поместившейся
на экране частью элемента (рис. 7.5).
8 6 6 DHTML & CSS for the WWW | Setting Where the О/e О
4» «Фа > i <£) «в !
! Document. Done
Рис. 7.5. Чтобы увидеть не поместившееся
на экране изображение, можно использовать
полосу прокрутки
Листинг7.3. В классе illustration определяется
ширина и высота, равные 200рх, свойству
overflow (часть элемента, которая не будет видна
в этой области) присваивается значение auto.
Полоса прокрутки будет располагаться там, где
это необходимо для просмотра не поместившейся
на экране части элемента. Класс затем
применяется к элементу в HTML-коде
>8 8
<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>
<h3>CHAPTER 9<br>The Mock Turtle's
->Stо ry</h 3>
<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>
Таблица 7.3. Значения параметра overflow
Значение Совместимость
scroll IE4, N6, CSS2
hidden IE4, N6, CSS2
visible IE4, N6, CSS2
inherit IE4, N6, CSS2
Управление невидимой частью |193|
Определение свойства overflow
1. width: 200px; height: 200px;
Укажите ширину и/или высоту области,
ограничивающей элемент (листинг 7.3).
Также можно установить видимую об-
ласть элемента с помощью значений, ука-
занных в табл. 7.3 (см. раздел «Опре-
деление видимости элемента»).
2. overflow:
Введите название свойства overflow и
поставьте двоеточие.
3. auto;
Укажите одно из ключевых слов, зада-
ющих работу браузера с невидимой ча-
стью (табл. 7.3):
- scroll. Рядом с видимой областью
элемента помещается полоса про-
крутки. Таким образом посетитель
сможет увидеть не поместившую-
ся на экране часть элемента;
- hidden. Оставшаяся часть элемента
скрывается, а полоса прокрутки не
появляется;
— visible. Оставшаяся часть элемен-
та отображается на экране. Это
ключевое слово сообщает браузеру,
что нужно проигнорировать опре-
деленную ранее видимую область;
- auto. Это значение позволяет браузе-
ру понять, как обращаться с остав-
шейся частью элемента.
В
Если свойство overflow не определено, мно-
гие браузеры проигнорируют свойство, уста-
новленное для элемента height.
Ш Свойство overflow также используется для
описания того, что делать с видимой частью
элемента, когда она становится невидимой.
7 Тиге Дж. К.
11941 Управление видимостью элемента
Настройка прозрачности
элемента
Настройка прозрачности любого элемен-
та на Web-странице не входит в стандарт-
ную спецификацию CSS, но Internet Exp-
lorer для Windows, а также браузеры Mo-
zilla (Netscape 6+, Firebird и Camino) по-
зволяют вам работать с этой функцией
(рис. 7.6-7.8). Различные типы браузеров
по-разному используют функцию для на-
стройки прозрачности элемента. Internet
Explorer основывается на встроенной
функциональности filter (которая мо-
жет использоваться и многими другими
способами), a Mozilla просто добавляет
новый параметр. Так как один браузер
будет игнорировать кодировку другого
браузера, вы можете поместить два опре-
деления в список правил элемента, чтобы
настроить его прозрачность (листинг 7.4).
Рис. 7.7. Текст имеет 75-процентную прозрачность
(0.75), поэтому часть фона просвечивается
Рис. 7.8. Текст имеет 50-процентную прозрачность
(0.5), поэтому слова начинают расплываться
Рис. 7.6. Этот текст имеет 100-процентную
прозрачность (1.0), поэтому фон не просвечивает
Листинг 7.4. Используя стили для Internet Explorer
(filter) и Mozilla (-moz-opacity), вы можете
настроить прозрачность элементов и быть
уверенными в том, что большинство браузеров
будут правильно отображать эти элементы
<html>
<head>
<style type-"text/css" media="screen"><!-
body (
background-image: иrl(static,gif)
)
hi {
filter:progid:DXImageTransform.
^Microsoft.BasicImage(opacity=0.75):
-moz-opacity: 0.75;
font-size: 72px;
font-family: 'Arial Black';
text-align: center;
}
-></style>
</head>
<body>
<h1>ALICE</h1>
</body>
</html>
Настройка прозрачности элемента 11951
Настройка прозрачности элемента
1. filter:
Чтобы управлять прозрачностью эле-
мента, отображенного в Internet Explorer
для Windows, введите в списке определе-
ний параметр filter и поставьте двоето-
чие (:).
2. progid:OXImageTransform.Microsoft.
->BasicImage(opacity=0.75);
Добавьте код progid, чтобы определить
фильтр и значение, которые использу-
ются. Вам не понадобится изменять
этот код, за исключением значения
после opacity, которое может варьиро-
ваться в диапазоне между 0.0 (полнос-
тью прозрачный объект) и 1.0 (полно-
стью непрозрачный объект).
3. -moz-opacity:
Чтобы управлять прозрачностью эле-
мента, отображенного в браузерах
Mozilla, введите в списке определений
параметр -moz-opacity и двоеточие (:).
4. 0.75;
Введите значение прозрачности для
объекта, которое может варьироваться
в диапазоне между 0.0 (полностью про-
зрачный объект) и 1.0 (полностью не-
прозрачный объект).
| л | Изменения прозрачности не будут работать
Ц е Internet Explorer для Macintosh, Safari или
।1 Opera.
УПМШШ
спои, тшицей
И ИНТЕРФЕЙСОМ
8
HTML позволяет автоматически устанав-
ливать нумерованные и маркированные
списки. Вы задаете список, а остальные дей-
ствия выполняег браузер. При добавлении
пункта его вид автоматически определяет-
ся, и он отображаегся на экране маркиро-
ванным или нумерованным в зависимости
от вида предыдущего элемента. Однако в
HTML ограничен выбор вида списка.
В CSS представлено гораздо больше вариан-
тов. Допускается менять вид маркера, кото-
рый используется для обозначения пункта
списка (буква, цифра нли точка), или
создавать собственные маркеры и списки
с висячими отступами.
Но Netscape 4 и Internet Explorer 4 не под-
держивают многие из этих свойств. Даже
если какое-либо из них и доступно в Net-
scape 4, вы все равно не сможете исполь-
зовать любой HTML-тег, поскольку раз-
решается лишь переопределять тег <11>.
В этой главе рассказывается, как с помощью
CSS придать спискам нужный вам вид, а
также описывается, как различными спосо-
бами менять форму указателя мыши.
© О О DHTML &CSS for the WWW | Setting IQ ;
Places to go
Lonaon
Paris
Tokyo
New York
Slippery Creek
Рис. 8.1. Определяйте списки с помощью CSS
Списки р!97~|
Листинг 8.1. Все параметры списка определяются
одновременно
<html>
<head>
<style typc=’text/css’>
li {list-style: url(bullet1.gif)
->circle inside; }
</style>
</nead>
<body>
<h3>Pla.:es to go</h3>
<ul>
<li>london
<ll>p.ir IS
<li>tokyo
<li>ricw york
<li>olippery creek
</ul>
</body>
</html>
Q DHTML & CSS for the WWW I Setting tO
«Оа (Д> =» »
Shopping list
. Butter
• Milk
♦ Cereal
« 5GB Hard drive
• Orange juice
• Cat Food
« 40MB RAM
• Soup
Списки
С помощью свойства list-style можно
описать все параметры списка в одной
строке. Допустимо использовать свойства
list-style-type, list-style-position и
list-style-image.
В данном примере (листинг 8.1) приведен
список городов, которые я хотел бы ког-
да-нибудь посетить. В нем применяются
необычные маркеры (рис. 8.1).
Определение в селекторе
нескольких параметров списка
1. list-style:
Введите свойство list-style и по-
ставьте двоеточие. Укажите значения
свойства list-style (табл. 8.1).
2. url(bullet1,gif)
Впишите свойство list-style-image.
Чтобы использовать собственный мар-
кер, сначала нужно создать его графи-
ческое изображение (рис. 8.2), а затем
указать путь к нему. Путь может быть
либо полным Web-адресом, либо ло-
кальным именем файла (см. далее раз-
дел «Создание собственных маркеров»).
3. circle
Задайте значение свойства list-style-
type (табл. 8.2) и нажмите клавишу
пробела. Если вы не хотите использо-
вать маркеры, установите значение попе
(см. следующий раздел).
I Document Done
Рис. 8.2. Пункты, относящиеся к компьютеру,
помечены другим маркером
11981 Управление списком, таблицей и интерфейсом
4. inside
Введите значение свойства list-style-
position (табл. 8.3) и нажмите клави-
шу пробела. Допустимы следующие
значения:
- inside. Строки выравниваются по
маркеру;
- outside. Строки выравниваются по
первой букве в первой строке тек-
ста.
Дополнительную информацию вы найде-
те далее, в разделе «Создание висячих от-
ступов».
Хотя s этом примере мы использовали тег
(j [ списка <ii>, вы можете преобразовать
1----1 любой элемент в список, добавив пара-
метры списка CSS вместе с определением
display, list-item.
ШВсе значения, указанные в предыдущем
примере, различны. Чтобы обеспечить ра-
боту правила, необязательно включать каж-
дое из них в определение. Недостающие
значения будут присвоены по умолчанию.
Например, определение list-style: inside;
будет работать.
ПИ Если посетитель отключил отображение
j графики в браузере или графический мар-
1----1 кер по какой-либо причине не загружается,
используется свойство list-style-type,
установленное по умолчанию.
Таблица 8.1. Значения параметра list-style
Значение Совместимость
<list-style-type> IE4, N4, S1,03-5, CSS1
<list-style- position> IE4, N4, S1, 03-5, CSS1
<list-style-image> IE4, N4, S1, 0Э-5, CSS1
Таблица 8.2. Значения параметра list-style-type
Значение Совместимость
<bullet-name>* IE4, N4, S1, 03-5, CSS1
none IE4, N4, S1, 03-5, CSS1
* См. табл. 6.4
Таблица 8.3. Значения параметра list-style-
position
Значение Совместимость
inside IE4, N6, S1, 03-5, CSS1
outside IE4, N6, S1, 0Э-5, CSS1
Виды маркеров pl 99|
Листинг 8.2. Создаются два класса: в одном
в качестве маркера используется закрашенный
кружок, в другом - квадрат
<html>
<head>
<style type= text/css">
li.grocery {list-style-type: disc;}
li computer {list-style-type:
->square:}
</style>
</head>
<body>
<h3>Shopptng list</h3>
<ul>
cli class=”grocery">Butter
<li class='grocery">Milk
<li class- ’grocery">Cereal
<11 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>
Виды маркеров
С помощью свойства list-style можно
изменять вид маркера, который исполь-
зуется в списке. Маркером может быть
закрашенный кружок (disc), пустой кру-
жок (circle), квадрат (square), а также бук-
вы, цифры и точки.
В данном примере (листинг 8.2) опреде-
лен список покупок. Для различных ти-
пов элементов применяются разные виды
маркеров (рис. 8.2).
Определение вида маркера
1. list-style-type:
Введите свойство list-style-type и
поставьте двоеточие. Задайте значения
свойства list-style-type, используя пе-
речисленные в табл. 8.2.
2. disc
Укажите название маркера (табл. 8.4).
Если вы не хотите применять маркеры,
установите значение попе.
I Хотя в этом примере мы использовали тег
списка <ii>, вы можете преобразовать лю-
।' бой элемент в список, добавив параметры
списка CSS вместе с определением display:
list-item.
12001 Управление списком, таблицей и интерфейсом
Создание собственных
маркеров
Маркеры, поддерживаемые браузерами
по умолчанию, можно использовать нео-
граниченно (см. выше раздел «Виды мар-
керов»). В качестве маркеров также при-
меняют графические изображения в фор-
мате GIF, JPEG и PNG, если браузер под-
держивает такую возможность.
В данном примере (листинг 8.3) приводит-
ся список дел, которые нужно выполнить
в ближайшее время (рис. 8.3), а маркером
служит созданная ранее стрелка (рис. 8.4).
Таблица 8.4. Маркеры параметра list-style
Название Внешний вид (зависит от системы)
disc •
circle 0
square
decimal 1, 2, 3
decimal-leading-zero 01, 02, 03
upper-roman I, II, III
lower-roman i, ii, it
upper-alpha А, В, C
lower-alpha a, b, c
lower-greek a. ₽, Z
Листинг 8.3. Вместо обычного маркера в этом
списке используется графическое изображение
,8 ев,,Листинг.—
<html>
<head>
<style type="text/css">
11 {list-type-image:
->url(bulletl.gif);
-xnargin-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>
Создание собственных маркеров 12011
jgQQ DHTML 4 CSS for the WWW | CreatingQ
jl8«?a a. WJ* * Jj____________________ . »
j Things to do
I write book
j make examples
edit book
| take hotxlay in bahammas
J drink pina colladas
Document: Done
Рис. 8.3. He ограничивайтесь использованием
имеющихся в браузере маркеров - создавайте
новые с помощью CSS
Рис. 8.4. Маркер-стрелка
Таблица 8.5. Значения параметра iist-style-
image
Значение Совместимость
<url> IE4, N6, S1,03-5, CSS1
none IE4, N6, S1, 03-5, CSS1
Определение собственного
маркера
1. list-style-image:
Укажите свойство list-style-image и
поставьте двоеточие.
2. url(bulletl.gif):
Чтобы маркировать список созданным
вами графическим объектом, нужно
указать в браузере путь к нему. Путь
может быть либо полным Web-адре-
сом, либо локальным именем файла.
В этом примере bullet 1. gif представ-
ляет собой локальный файл.
Если вы не хотите добавлять свой мар-
кер, укажите значение попе. В этом слу-
• чае браузер проигнорирует все насле-
дованные маркеры (табл. 8.5).
г~“| Netscape 4 не поддерживает свойство
I Q list-style-image. Поэтому рекомендуется
।1 включать в определение также и list-
style-type на тот случай, если нельзя бу-
дет использовать картинку.
Ш Применение графических маркеров улуч-
шает вид страницы, но увеличивает время
ее загрузки.
1 _ “I Учтите, что графические маркеры иногда за-
(j нимают больше места, чем обычные. При ис-
।1 пользовании высоких изображений простран-
ство между отдельными маркерами увеличи-
вается. Если же применяются широкие изоб-
ражения, текст сдвигается вправо.
12021 Управление списком, таблицей и интерфейсом
Создание висячих отступов
Часто текст в элементе маркированного
списка занимает несколько строк. С помо-
щью свойства list-style-position можно
определить положение текста по отноше-
нию к маркеру. Если текст выравнивается
по первой букве первой строки, такой от-
ступ называется висячим.
В рассматриваемом примере (листинг 8.4)
устанавливается два вида отступа: вися-
чий и тот, в котором текст выравнивается
по маркеру (рис. 8.5).
Установка отступа в списке
1. list-style-position:
Укажите свойство list-style-position
и поставьте двоеточие.
2. inside
Чтобы определить вид отступа, введи-
те одно из следующих ключевых слов
(табл. 8.5):
- inside. Строки выравниваются по
маркеру;
- outside. Строки выравниваются по
первой букве в первой строке текста.
Э08 DHTML & CS5 for the WWW I CreatinflCZJ
• ‘A knot!' said Alice, always ready to make herself
useful, and looking anxiously about her. 'Oh, do let i
me help to undo КГ
• 'I shall do nothhg of the sort,’ said the Mouse,
getting up and walkhg away. "You hsult me by
talking such nonsensel'
• 'I didn't mean Kf pleaded poor Alice. 'But you're so
easily offended, you knowl* *
• The Mouse only growled in reply.
Листинг 8.4. Висячий отступ используется
по умолчанию. Выровнять текст по маркеру
позволяет класс inside
листинг .............. ,о]
<html>
<head>
<style type=”text/css” media="screen’'x’-
li {
list-style-position: outside;
}
.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>
<11 class="inslde”>'I shall do nothing
->of the sort,' said the Mouse, getting
->up and walking away. 'You insult me
->by talking such nonsense!'</li>
<li>’I didn’t mean it!’ pleaded poor
->Alice. ‘But you’re so easily
->offended, you know!’</li>
<li>The Mouse only growled
->in reply.</li>
</ul>
</body>’
</html>
| _ “I Маркированные списки с висячим отсту-
пом (outside) обычно выглядят лучше,
।1 чем списки без отступа (inside).
Document: Done
Рис. 8.5. Два вида отступа
Свертывание границ между ячейками таблицы 12031
Листинг 8.5. Ячейки данных в таблице, которые
приобретают класс collapsus, будут иметь общие
границы
see листинг. - о~|
<head>
<style ’уро-''text/css" media="screen'’><’-
.collapsu'. {
border-collapse: collapse:
-x/s 1
</head>
<Dody bgcolor -
stable class="collapsus" width="l80"
->border='5" cellspacings
->”5' cellpadding=”5">
<tr>
-1d>a</td>
z td>b</td>
td->c</td>
</tr-
<tr -
rd>d</td>
td>e</td>
t d>f </td>
t p>g</td>
• td>h</td>
</tr >
</tabl-?.'
</body>
</html>
Свертывание границ
между ячейками таблицы
Каждая ячейка таблицы, которая опреде-
ляется тегом <tg>, имеет четыре границы:
верхнюю, левую, нижнюю и правую. Па-
раметр border-collapse позволяет вам на-
страивать таблицу таким образом, чтобы
каждая ячейка делила границы с соседней
ячейкой, а не создавала свои собственные
(листинг 8.5 и рис. 8.6). Результат будет
немного различаться в зависимости от
браузера (рис. 8.7).
вОв DHTML &CSS for the WWW ICollajO
Рис. 8.6. В браузерах Mozilla границы становятся
одной линией. Верхняя таблица показывает ту же
самую кодировку с параметром border-collapse
12041 Управление списком, таблицей и интерфейсом
Сворачивание границ
в таблице
1. border-collapse'
Введите параметр border-collapse и
двоеточие (:).
2. collapse
Введите одно из следующих значений,
чтобы указать, как следует восприни-
мать границы в таблице (табл. 8.6):
- collapse. Позволяет соседним ячей-
кам в таблице использовать одну и ту
же границу; если границы свернуты,
вы не сможете использовать опцию
cell-spacing;
- separ ato. При этом каждая ячейка
данных будет использовать свои соб-
ственные границы.
Таблица 8.6. Значения параметра
border-collapse
Значение Совместимость
collapse IE5.5* *, N7, S1, 05, CSS2
separate IE5.5*. N7, S1, 05, CSS2
* Только для Windows
Back ' Refresh 'Forward:
Рис. 8.7, В Internet Explorer для Windows границы
сворачиваются, но верхние и нижние границы
исчезают благодаря эффекту трехмерности.
Верхняя таблица показывает ту же самую
кодировку без параметра border-collapse
Настройка положения таблицы 12051
Листинг 8.6. Текст в теге <caption>, который
использует класс placeCaption, будет помещен
под своей таблицей
Листинг
<head>
<style type="text/css" media=”screen”><!-
.placeCaption {
caption-side: bottom;
I
-></style>
</head>
<body bgcolor="#ffffff">
<table width=”180" border-'5"
->cellspacing="5” cell padding-’5”>
^-caption class="placeCaption">Table
A Bunch of letters</caption>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</htrr/l>
Настройка положения
таблицы
Ter <caption> позволяет вам заключать оп-
ределяющий текст в таблицу. Вы можете
задать в теге таблицы атрибут align, чтобы
указать, где именно по отношению к
таблице должен отображаться текст. Впро-
чем, эта возможность нивелируется пара-
метром caption-side CSS, который делает то
же самое (листинг 8.6 и рис. 8.8).
0 00 DHTML & CSS for the WWW | Setting tCD .
Рис. 8.8. Верхняя таблица показывает положение
текста, которое задается по умолчанию
(над таблицей). Нижняя таблица использует
параметр caption-side, чтобы переместить текст
под таблицу
12061 Управление списком, таблицей и интерфейсом
Настройка положения текста
по отношению к таблице
1. caption-side:
Введите параметр caption-side и двое-
точие (:).
2. bottom.
Введите ключевое слово, которое пока-
зывает, с какой стороны от таблицы вы
желаете отобразить текст (табл. 8.7): top,
left, bottom или right.
ЕХотя вы можете пожелать поместить текст с
любой стороны от таблицы, сейчас браузе-
ры поддерживают только положение top и
bottom.
Изменение внешнего вида
курсора мыши
Обычно форма указателя мыши устанав-
ливается браузером, при этом указатель
меняется в зависимости от того, в каком
месте страницы он находится.
Например, указатель, наведенный на текст,
становится текстовым курсором. Если же
страница недоступна, указатель приобре-
тает форму песочных часов, таким обра-
зом подавая сигнал посетителю, что нуж-
но подождать.
Однако не всегда следует рассчитывать на
браузер, иногда необходимо самим опи-
сывать формы указателя.
В приведенном примере (листинг 8.7) оп-
ределяются различные формы указателя.
Выбор формы зависит от элемента стра-
ницы, над которым находится указатель
(рис. 8.9, 8.10 и 8.11).
Таблица 8.7. Значения параметра caption-side
Значение Совместимость
top IE5*, N6, S1,07, CSS2
left CSS2
bottom |Е5‘, N6, S1, 07, CSS2
right CSS2
* Только для Mac
Листинг 8.7. Для определения формы указателя
используется класс help, так как ссылка
относится к слову «help». Указатель, находящийся
над картинкой, определяется как move. Для других
элементов страницы используется указатель,
который обычно появляется в левом верхнем углу
экрана при изменении размеров окна
<html>
<head>
<style type="text/css" media="screen"><!-
body {cursor: nw-resize;}
img {cursor: pointer;}
. help {cursor: help;}
-></style>
</head>
<body>
<h3>CHAPTER VlIKbr />
The Queen's Croquet-Ground</h3>
<p><img src="alice30.gif’ height=”272"
->width=”200’’ align=”left" border="0”
->/>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>
Изменение внешнего вида курсора мыши [2071
Рис. 8.9. Указатель имеет форму стрелки, но все
же отличается от обычного
966 OHTMLSCSS <or th< WWW IChMglngiht Meus«P<Hnt<r> Анм'жс О
«СО » > (I) Л i «*
Определение формы
указателя мыши
aumavni
Рис. 8.10. При наведении на ссылку указатель
превращается в знак вопроса
1. cursor:
В списке CSS-определений напишите
слово cursor и поставьте двоеточие.
2. help;
Введите одно из имен курсора, указан-
ных в табл. 8.8, чтобы определить его
внешний вид. Также вы можете ввести
одно из следующих значений для пара-
метра cursor (табл. 8.9):
- auto, если вы желаете, чтобы брау-
зер сам определил, какой тип курсо-
ра нужно использовать;
- попе, чтобы курсор исчезал;
Рис. 8.11. Указатель мыши находится над картинкой
12081 Управление списком, таблицей и интерфейсом
- и г 1 и положение графического объек-
та, который следует использовать в
качестве курсора. Адрес может быть
полным Web-адресом или именем
локального файла рисунка.
ЕВ качестве курсора вы можете использо-
вать любой Web-формат рисунка (GIF, PNG
или JPEG). К сожалению, эта опция будет
работать только в Internet Explorer 6.
Е менять форму указателя мыши - интерес-
ное занятие, но, протестировав эту возмож-
ность на своем сайте, я пришел к выводу,
что не всем посетителям это нравится. Мно-
гие присылают сообщения по электронной
почте с просьбой вернуть обычный указа-
тель. Пользователи уже привыкли к тради-
ционным указателям и знают, что обознача-
ет та или иная форма. Изменение этих стан-
дартов может запутать людей.
Таблица 8.8. Типы курсоров
Имя Внешний вид (зависит от операционной системы)
crosshair +
e-resize
hand*
help 7
move *
ne-resize л
n-resize ж
nw-resize Г.
pointer *
se-resize
s-resize ▼
sw-resize к*
text I
wait 0
w-resize <•
• Только для IE, аналогично pointer
Таблица 8.9. Значения параметра cursor
Значение Совместимость
<cursor type name> IE5’, N6, S1, 07, CSS2
<URL> IE6, CSS2
auto IE5’, N6, S1, 07, CSS2
none IE5’, N6, S1,07, CSS2
* IE5.5 для Windows
Изменение внешнего вида полосы прокрутки 12091
Листинг 8.8. В Internet Explorer для Windows вы
можете управлять цветом любой части полосы
прокрутки
<head>
<style type-"text/css” media-'screen’’><:! -
body {
scrollbar-base-color: red;
textarea {
scrollbar-3dlight-color; black;
scrollbar-arrow-color: white;
scrollbar-darkshadow-color: white;
scrollbar-face-color: ttcccccc;
scrollbar-highlight-color: black;
sc rollbar-shadow-color; white;
scrollbar-track-color: gray;
1
-></style>
</head>
<body bgcolor-"#?fffff">
<textarea style="float: left"
->r>ame=" textareaName" rows=’’20"
->cols="45">
'Who cares for you7’ said Alice, (she had
->grown to her full size by this time.)
->‘You’re nothing but a pack of cards!'
</textarea>
<img src-"alice42a.gif" alt-'
->"height="480" width=”360" border="0" />
</body>
</html>
Изменение внешнего вида
полосы прокрутки
(только Internet Explorer
для Windows)
Internet Explorer (версия 5.5 и выше) для
Windows позволяет вам настроить цвет
для всей полосы прокрутки или ее части
(листинг 8.8). Эти свойства могут быть
применены к главной полосе прокрутки
для страницы или любой другой полосе
прокрутки на странице, например, полосе
прокрутки в текстовой области (рис. 8.12).
Рис. 8.12. Главная полоса прокрутки для страницы
стала красной, трехмерное изображение полосы
прокрутки текстовой области было перевернуто
12101 Управление списком, таблицей и интерфейсом
Настройка цветов для полосы
прокрутки
1. scroll-base-color: red;
Введите параметр scroll-base-color'
и двоеточие (:), затем значение цвета
и точку с запятой (;). Так вы зададите
общий цвет для полосы прокрутки.
2. scrollbar-3dlight-color: black;
Введите один из параметров настройки
цвета для полосы прокрутки (табл. 8.10)
и двоеточие (:), затем значение цвета и
точку с запятой (;). Эти установки ис-
пользуются для настройки цвета отдель-
ных элементов полосы прокрутки. Вам
необязательно вводить все параметры в
определении; для пропущенных значе-
ний браузер будет использовать те, кото-
рые были заданы по умолчанию.
Е «Сторона прокрутки» полосы прокрутки
включает трехмерные грани стрелок вверх/
вниз и курсор прокрутки.
Таблица 8.10. Значения параметра
scrollbar color
Параметр
Местоположение
scrollbar-
3dlight-color
scrollbar-
arrow-color
scrollbar-
base-color
scrollbar-
darkshadow-color
scrollbar-
face-color
scrollbar-
highlight-color
scrollbar-
shadow-color
scrollbar-
track-color
Внешние верхняя и левая
границы стороны прокрутки;
используются для создания
трехмерного эффекта
Стрелки в полях
Цвет, который будет
использоваться в том случае,
если не указаны другие
параметры
Внешние нижняя и правая
границы стороны прокрутки;
используются для создания
трехмерного эффекта
Плоские области в ползунке,
кроме трека
Внутренние верхняя и левая
границы стороны прокрутки;
используются для создания
трехмерного эффекта
Внутренние нижняя и правая
границы стороны прокрутки;
используются для создания
трехмерного эффекта
Плоская область, которая
определяет полосу прокрутки
ГЛ AM Ч ♦ Назначение DHTML......................212
Г Л Л 4> Л 10 ♦ Объектная модель документа и события...224
ГЛААА 11 ♦ Среда, в которой вы работаете.........246
ГЛААА 12 ♦ Информация об объекте.................264
ГЛААА 12 ♦ Информация о событии..................282
ГЛААА 14 ♦ Основы динамических технологий........294
ГЛААА 1С ♦ Развитые динамические технологии......314
ГЛААА 1С ♦ Динамические технологии CSS...........337
лшчош wiimi
9
Каким бы мощным инструментом ни яв-
лялись каскадные таблицы стилей, они по
сути своей не динамичны. CSS позволяют
определять, как будет выглядеть документ
при первой его загрузке, но не более.
Свойства Web-страниц, созданных с по-
мощью CSS, можно менять динамически
посредством языка JavaScript.
Кроме того, динамический HTML (DHTML)
позволяет пользователям напрямую взаи-
модействовать с Web-страницами и со-
здавать более сложные пользовательские
интерфейсы, чем при помощи HTML.
Например, Web-сайт компании Panic
software использует DHTML, чтобы по-
зволить пользователям быстро загружать
программное обеспечение (рис. 9.1). Щелк-
нув по иконке приложения, вы отобрази-
те дополнительную информацию о про-
дукте. При перемещении иконки вы смо-
жете загрузить программу. Без DHTML
такой интерфейс был бы невозможен.
В этой главе мы расскажем о функциях, ко-
торые делают DHTML динамичнее, и срав-
ним его с другой передовой Web-техноло-
гией - Flash.
Рис. 9.1. На Web-сайте Panic (www.panic.com)
вы можете щелкнуть ло иконке приложения,
чтобы просмотреть информацию о продукте,
а также переместить иконку, чтобы загрузить
приложение
Динамический
HTML 1213[
амический HTML
лом деле языка DHTML нет, по край-
мере его существование не похоже на
ествование HTML и JavaScript, кото-
представляют собой определенные
ологии для Internet. Динамический
!L - это коммерческий термин, приду-
ный Netscape и Microsoft для описания
t технологий, которые были введены в
1ертой версии Web-браузеров и пред-
[ачались для расширения их динами-
их возможностей.
технологии были созданы или добав-
ыдля того, чтобы обойти те ограниче-
:, которые, как полагали, существовали
«разработке Web-страниц при помощи
HTML. Internet хорошо взаимодейство-
вал как с текстом, так и с графикой, но
люди, привыкшие к мультимедиа, ждали
большего.
Созданная на основе DHTML страница мо-
жет изменяться, не обращаясь к серверу за
дополнительными данными. Программис-
ты называют такой код клиентским, или
кодом на стороне клиента (client-side code).
DHTML представляет собой комбинацию
Web-технологий, основанных на различ-
ных стандартах (CSS, DOM, JavaScript и
языки разметки). Комбинация этих стан-
дартов позволяет существенно увеличить
интерактивность вашей Web-страницы
(рис. 9.2).
#objl{...} function doSomethingCobjl) document.objl <div id-”objl”>...</div>
CSS + JavaScript + DOM + XHTML = DHTML
оделяет объекты Изменяет объекты Находит объекты Создает объекты
naWeb-странице на Web-странице на Web-странице на Web-странице
IC. 9.2. Компоненты DHTML
214 Назначение DHTML
Каскадные таблицы стилей (CSS)
CSS - это стандарт, установленный World
Wide Web Consortium (W3C). За дополни-
тельной информацией по CSS обращай-
тесь к главе 1 «Введение в CSS». С помо-
щью CSS определяются свойства элемента
на странице. Болес старые версии браузе-
ров (Netscape 4 и Internet Explorer 4) под-
держивают CSS первого уровня и CSS-no-
зиционирование, браузеры последнего по-
коления (Netscape 6 и Internet Explorer 6) -
CSS второго уровня.
Объектная модель документа (D0M)
Во всех браузерах, поддерживающих
DHTML, есть какая-либо версия DOM,
с помощью которой можно получить до-
ступ к любому объекту в окне браузера.
Однако W3C до сих пор не стандартизи-
ровал DOM. Чтобы страницы, созданные
на основе DHTML, правильно отоб-
ражались во всех браузерах, DHTML дол-
жен работать с DOM, поддерживаемой
Netscape 4 и Internet Explorer 4. Мы обра-
дуем вас; большинство современных брау-
зеров теперь поддерживают W3C DOM, и
наследованная кодировка постепенно ста •
новится ненужной. За дополнительной
информацией по DOM обращайтесь к
главе 10 «Объектная модель документа и
события».
Рис. 9.3. Web-страница ЕСМА (www.ecma-
international.org)
JavaScript
С помощью JavaScript создаются простые
программные коды, которые управляют
функционированием объектов Web-стра-
ницы. В Netscape и Internet Explorer не
всегда применяются одинаковые про-
граммные коды JavaScript, однако они
имеют много общего, что позволяет ис-
пользовать их, несмотря на несовмести-
мость этих браузеров.
Динамический HTML 12151
tfb * Л -
илг-
”»>-> ^^^тсонтгпя
Hyperlexl Markup Language (HTML)
Home Page
Рис. 9.4. Web-страница W3C (www.w3.org).
созданная с использованием языка XHTML
В отличие от CSS и DOM, JavaScript не яв-
ляется стандартом, установленным W3C.
Вместо этого JavaScript был стандартизи-
рован Европейской Ассоциацией Произ-
водителей Компьютеров (ЕСМА). По сути
дела, часто этот стандарт называют «ЕСМА
script» (рис. 9.3).
До того как в 1996 г. ЕСМА начала свою
инициативу по стандартизации, суще-
ствовало несколько версий JavaScript. Из-
начально стандарт JavaScript носил назва-
ние JScri.pt в Internet Explorer 3.0 и
JavaScript в Netscape 2.0. В настоящее вре-
мя большинство браузеров поддержива-
ют JavaScript 1.2 (официально его называ-
ют «Standard ЕСМА-262») в качестве стан-
дарта JavaScript, поэтому в книге мы бу-
дем использовать именно его.
Язык разметки
Языки разметки используются Web-брау-
зерами, чтобы задать структуру Web-
страницы. Такая структура может иметь
разную форму. HTML используется для
определения структуры Web-страницы, а
XML может задать не только структуру,
но и содержимое Web-страницы. Кроме
того, существует ряд других специальных
технологий, например SVG и SMIL, кото-
рые используются, чтобы добавить на
страницу графику и интерактивность. Все
данные языки могут работать с CSS,
JavaScript и DOM для создания динамич-
ных Web-страниц.
Язык XHTML представляет собой смесь
XML и HTML, которая постепенно заме-
няет HTML (рис, 9.4). Хотя язык DHTML
можно применять к огромному количе-
ству языков разметки, в этой книге мы
будем использовать кодировку, характер-
ную для стандарта XHTML.
12161 Назначение DHTML
История DHTML
Когда динамический HTML был впервые
разработан в середине 1990-х годов, у ком-
паний Netscape и Microsoft имелись раз-
личные идеи о том, какие технологии сле-
дует применять, чтобы сделать HTML бо-
лее динамичным.
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,
Каким должен быть DHTML
Несмотря на то, что не существует
официального или просто стандартно-
го определения динамичного HTML,
без сомнения, можно определить ряд
задач, которые этот стандарт обязан
решить:
DHTML должен использовать
HTML- или XHTML-теги и языки
Web-программирования, не тре-
буя установки дополнительных
обновлений и какого-либо иного
программного обеспечения, кро-
ме самого браузера;
DHTML, как и HTML, должен ра-
ботать (или иметь потенциал для
работы) со всеми браузерами и на
всех платформах;
DHTML должен повышать инте-
рактивность и улучшать внешний
вид Web-страниц.
История DHTML
[2П]
Рис. 9.5. На пересечении версий Netscape
и Microsoft схематически представлен общий
DHTML, включающий CSS, JavaScript и D0M
и маловероятно, что она войдет в область
пересечения, показанную на рис. 9.5. Я не
советую использовать эту технологию.
С помощью визуальных фильтров к тексту
и графике документа можно создавать раз-
личные эффекты. Если вы когда-либо име-
ли дело с фильтрами Photoshop, принцип
работы визуальных фильтров будет вам
понятен. Однако эти фильтры не являют-
ся стандартными, многие браузеры их не
поддерживают. Мы не рекомендуем ис-
пользовать визуальные фильтры за ис-
ключением тех редких случаев, когда похо-
жего эффекта можно добиться с помощью
другой кодировки, например при работе с
прозрачностью (см. главу 7).
Проблема несовместимости
применительно к DHTML
В течение многих лет проблема несовмес-
тимости технологий двух основных бра-
узеров приводила к тому, что разработчи-
ки Web-технологий активно искали про-
грамму, которая смогла бы совместить
разные стандарты. К счастью, специфика-
ции Netscape и Microsoft для DHTML пе-
ресекаются (рис. 9.5), благодаря чему
DHTML не станет еще одной новой тех-
нологией, которая несовместима ни с чем.
Сейчас браузеры все больше используют
стандарты CSS, DOM и JavaScript, и ис-
пользование старых браузеров (например
Netscape 4) сходит на нет, поэтому DHTML
можно использовать для большого коли-
чества приложений. Разумеется, конфлик-
ты между браузерами по-прежнему суще-
ствуют. Тем не менее, стало проще создать
единый код для всех браузеров.
2161 Назначение DHTML
Причины использования
DHTML
Если вы приобрели эту книгу, то вам, ве-
роятно, уже известно обо всех преимуще-
ствах использования DHTML при созда-
нии Web-страниц. Но если вы еще не знае-
те, какие возможности предоставляет эта
технология, прочитайте данный раздел -
здесь подробно описываются все плюсы
применения DHTML в Web-дизайне, а
также рассказывается о проблемах, возни-
кающих при создании страниц.
Преимущества DHTML
Конечно же, у DHTML есть множество
достоинств, иначе никто бы не пользо-
вался им. Но тем не менее потребовалось
несколько лет, чтобы осознать все плю-
сы применения этой технологии. Ниже
перечислены некоторые из преимуществ
DHTML:
поддерживается всеми браузерами.
DHTML полностью или частично под-
держивается любым известны^ брау-
зером после Netscape 4 и Internet
Explorer 4, с которыми работает боль-
шинство пользователей сети Internet.
Кроме того, DHTML поддерживается
такими браузерами, как Opera и Safari,
а также всеми браузерами Mozilla;
открыт ыс стандарты. DHTML использу-
ет стандартные технологии, которые от-
крыты для любой компании-производи-
теля браузеров, поэтому вы можете со-
здавать ваши страницы в соответствии с
данными стандартами и быть уверенны-
ми в том, что (по большей части) стра-
ницы будут отображаться одинаково в
любом браузере. Несмотря на то, что вы
встретитесь с небольшими несоответ-
ствиями в применении стандартов для
разных браузеров, похожих моментов
будет больше, чем различий;
изменение содержания в процессе рабо-
ты. Одно из наиболее очевидных пре-
имуществ DHTML заключается в том,
что вы можете вносить изменения в со-
держимое Web-страницы после ее заг-
рузки (при этом не нужно повторно
загружать страницу). Именно в этом
проявляется динамичность DHTML;
небольшой размер файлов. Каки HTML,
DHTML создается с помощью текстовых
файлов, размеры которых меньше, чем
у графических. Текстовые файлы загру-
жаются быстрее, чем Flash и Java;
не требуется модулей расширения
(plugin). Если браузер поддерживает
HTML, CSS, JavaScript и DOM, то он
поддерживает н DHTML;
DHTML просто изучить. Если вы знае-
те HTML и JavaScript, вы легко освои-
те и DHTML;
быстрота разработки. Многое из того,
что Web-дизайнеры создают с помощью
графики и JavaScript, можно гораздо
быстрее сделать, используя DHTML;
быстрота загрузки. DHTML удобен для
того, чтобы скрывать, отображать и ме-
нять элементы страницы, не загружая
новые. Это увеличивает скорость рабо-
ты Web-сайта, так как количество обра-
щений к серверу уменьшается. Кроме
того, DHTML-код представляет собой
текст, поэтому он будет загружаться
быстрее по сравнению с другими инте-
рактивными технологиями, такими,
как Flash;
отсутствие Java-программнрования. Хотя
DHTML выполняет в основном те же
функции, что и Java, для работы с ним вам
не придется в полной мере изучать этот
язык (однако знание основ JavaScript все
же потребуется).
Flash и DHTML 12191
Недостатки DHTML
Но не все так просто. Чтобы использовать
DHTML, нужно знать как его сильные,
так и слабые стороны:
несовместимость браузера и операцион-
ной системы. Страницы, созданные при
помощи CSS, JavaScript и DOM, выгля-
дят по-разному в разных браузерах, но
иногда и в одинаковых, работающих в
разных операционных системах. В этой
книге представлены различные реше-
ния подобных вопросов, однако неко-
торых проблем все-таки не избежать
(см. раздел «Различия между браузе-
рами» в главе 21);
неточности. JavaScript и CSS весьма
; чувствительны к ошибкам в синтакси-
се. Ничего страшного не случится,
. если вы забудете написать закрываю-
щий тег или встроите один тег в дру-
гой, хотя именно с этими тегами такая
операция недопустима. Но если вы на-
пишете лишнюю скобку в JavaScript
или забудете поставить двоеточие в
списке CSS-определений, страница мо-
жет принять совершенно неожидан-
ный вид. Помимо этого, если вы ис-
; пользуете XHTML вместо HTML (мы
рекомендуем делать именно так), вы не
сможете справиться с ошибками, с ко-
торыми вы справлялись в HTML;
ошибки в браузерах. Во многих брау-
зерах возникают ошибки, приводя-
щие к тому, что DHTML перестает ра-
ботать, но затем его работа внезапно
возобновляется. Одним из примеров
может служить ошибка, возникающая
в Netscape и относящаяся к изменени-
ям.размера страницы. Если вы изменя-
ете размер окна в Netscape, а в это вре-
мя на экране отображается страница,
использующая CSS, то при перерисо-
вывании страницы таблица стилей не
будет применяться до тех пор, пока
страницу не перезагрузят. Далеко не все
ошибки можно исправить или обойти.
Flash и DHTML
Macromedia Flash и DHTML появились по-
чти одновременно около четырех лет назад.
И с тех пор при добавлении элементов ин-
терактивности на сайт Web-дизайнерам
приходится делать выбор: Macromedia Flash
или DHTML.
DHTML позволяет работать с интерактив-
ностью при помощи HTML, CSS и Java-
Script. Flash представляет собой некоторый
объект, встраиваемый в HTML-страницу,
и является отдельной Internet-технологией.
Далее рассказывается о достоинствах и не-
достатках главного конкурента DHTML -
это поможет вам выбрать наиболее подхо-
дящую технологию.
2201 Назначение DHTML
Преимущества Flash
Flash становится все более популярным
среди дизайнеров, и этому есть несколько
причин:
платформенная независимость. Стра-
ницы, созданные при помощи Flash,
выглядят примерно одинаково и в
Internet Explorer 5 под Мас, и в Netscape
4 под Windows. В отличие от HTML,
JavaScript и CSS, которые разрабатыва-
лись различными компаниями, произ-
водящими браузеры, Flash создан в од-
ной корпорации. Таким образом, не су-
ществует взаимной несовместимости
браузеров и операционных систем;
повсеместность. По словам представи-
телей компании Macromedia, у 95%
пользователей Web установлена какая-
либо из версий проигрывателя Flash.
Возможно, эти цифры завышены, но
вероятность того, что посетители ваше-
го Web-сайта смогут увидеть его Flash-
содержимое, велика;
привлекательность. Flash предоставля-
ет дизайнерам огромное количество
инструментов. К тому же многие из ди-
зайнерских наград получены за разра-
ботку Web-сайтов с использованием
Flash;
небольшой размер. Если Flash-файлы
созданы правильно, они не занимают
много места и достаточно быстро за-
гружаются.
История Flash
В 1997 году компания Macromedia при-
обрела программу FutureSplash Ani-
mator, добавила в нее интерактивные
функции н возможность написания
сценариев, переименовала программу
в Flash и предложила ее как способ
создания динамической графики для
Internet. До этого момента графика
в Web оставляла желать лучшего. Един-
ственным способом добавить движение
в окно браузера были анимационные
картинки в формате GIF или PNG.
Ситуация изменилась с появлением
Flash, позволившего Web-дизайнерам
управлять видом и функционирова-
нием элементов страницы.
Важно помнить, что Flash одновре-
менно является и программой (Flash,
Macromedia Inc.), и файловым фор-
матом (расширение .swf, произно-
сится «свнф»). Файловый формат в на-
стоящее время считается открытым.
Корпорация Adobe Systems Inc. разра-
ботала программу для создания движу-
щихся картинок Flash - LiveMotion.
Flash и DHTML [221^
(едостатки Flash
1аряду с преимуществами, у Flash есть
[ недостатки:
Flash трудно изучать и создавать с его
помощью Web-страницы. Программные
коды HTML, CSS и JavaScript можно за-
писывать в простом текстовом редакто-
ре, но чтобы создавать Flash-файлы, не-
обходимо купить и изучить Macromedia
Flash или Adobe LiveMotion. Обе эти
программы сложны;
несовместимость. У многих пользовате-
лей имеется проигрыватель Flash, но не
самой последней версии. Таким образом,
не все смогут посмотреть графику Hash.
Чтобы увидеть ваш сайт, пользователю
придется загрузить последнюю версию
Flash. То же верно и в отношении браузе-
ров, но обычно посетители Web не любят
загружать различные модули расшире-
ния. Кроме того, в последнее время дей-
ствия, которые предпринимает компа-
ния Eolas (претендующая на авторские
права по созданию обновлений для брау-
, зеров), ставят под сомнение будущее
технологии обновлений применительно
к Web-браузерам. Эта проблема еще да-
лека от решения, но она может отрица-
тельно повлиять на все технологии об-
новления, включая Flash;
проблемы с интерфейсом. Flash пред-
лагает повышенную универсальность
дизайна по сравнению с HTML. Но
большие возможности всегда приво-
дят к возникновению повышенных
требований. Дизайнеры предпочита-
ют использовать стандартный Web-
интерфейс при работе с Flash, что мо-
жет запутать пользователя;
неправильное использование. С помо-
щью Flash создают более гибкий интер-
фейс, чем с помощью HTML. Но стан-
дартный Web-интерфейс на основе Flash
может только запутать пользователя;
долгая загрузка. Очень трудно умень-
шить размер графических файлов Flash.
Многие дизайнеры забывают о неболь-
шой скорости модемной связи с Internet
и о том, что загрузка больших файлов
займет некоторое время.
12221 Назначение DHTML
Проблема выбора
Возможно, я пристрастен, но мне больше
нравится простота DHTML. Однако ваш
выбор зависит от множества факторов
(рис. 9.6). При определении технологии,
которая лучше всего подходит для созда-
ния вашего сайта, следует обратить вни-
мание на следующее:
программное обеспечение посетителей.
Поддерживают ли их браузеры DHTML,
установлена ли у них текущая версия
Flash plugin, возможна ли несовмести-
мость с plugin? Первое правило Web-
дизайна: «Знай своих посетителей»;
денежные вложения. Затраты на DHTML
не превосходят затрат на HTML. Flash
же требует покупки программного
обеспечения (Flash или LiveMotion).
Цена этих программ достигает несколь-
ких сотен долларов без учета стоимос-
ти обучения;
использование на сайте эффектов муль-
тимедиа. Для создания и представления
мультимедийного содержания больше
подходит Flash, а не DHTML;
текстовое содержание сайта. Для пред-
ставления большого количества текстов
больше подходит DHTML и HTML. Не-
смотря па значительные успехи Flash в
использовании технологий печати стра-
ниц, он все же не может заменить HTML;
время, отпущенное на разработку сайта.
Как правило, сайт на основе DHTML со-
здается быстрее, но это зависит от того,
какую технологию вы знаете лучше;
предполагаемая аудитория. Если посе-
тители хотят увидеть фейерверки, то
вам понадобится Flash. Если же требу-
ется простой сайт, выбирайте DHTML.
Удобство и простота
Главный специалист по Web-usability
Якоб Ниелсен (Jakob Nielsen) активно
выступает против Flash. В своей статье
«Flash: 99% Bad» (www.useit.com/
alertboxZ20001029.html) он рассказыва-
ет о том, что Web-дизайнеры со ста-
жем ломают традиции, а это может
запутать пользователя.
В ответ на эти заявления Macromedia
создала сайт (www.macromedia.com/
go/usabilityk на котором находятся ста-
тьи об удобстве использования Flash.
Проблема выбора |~223]
Содержание
Рис. 9.Б. Выбирая между Flash и DHTML, нужно иметь в виду следующие факторы: доступные
технологии, стоимость, уровень мультимедиа, содержание сайта, необходимое для создания
сайта время
ШТИЛЯМОДОМ»
ДОДОМШЛ И COWTMfl
10
С помощью объектной модели документа
(Document Object Model - DOM) можно
динамически менять Web-страницу, ис-
пользуя язык написания сценариев. DOM
ставит в соответствие каждому элементу,
определенному с помощью атрибута ID, то
есть объекту, функцию JavaScript. Таким
образом, вы вправе менять любое свойство,
которым можно управлять с помощью CSS.
Объектная модель DOM не создавалась
в качестве стандарта, но новые версии
Netscape и Internet Explorer используют
DOM, которая была стандартизирована
World Wide Web Consortium (W3C) -
рис. 10.1.
В этой главе рассказывается о том, как ис-
пользова) к стандартизированную модель
DOM W3C, а также события для выполне-
ния действий при помощи модели DOM.
Рис. 10.1. Сайт объектной модели документа W3C,
который сохраняет формат для вашей модели DOM
DOM - путеводитель по Web-странице 12251
; Листинг 10.1. Простая Web-страница, структура
которой была разбита на узлы, как показано
на рис. 10.2
>60 ..... .... ::;,\;;;У;ЛИСТИНГГ.
I <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN’’>
<html>
<head>
<title>DHTML & CSS for the WWW |
^Understanding the DDM</title>
</head>
<body>
<form action=» method=’’get’’>
<input type=”text” size=”24” />
</form>
<div>
<img src=’’alice2Ba.gif” id=”alice1” />
Your Message Here
</div>
</body>
</html>
Какой атрибут лучше использовать:
name или id?
Чтобы идентифицировать картинку
и использовать ее вместе с DOM
в браузере, можно применить атри-
бут пате:
<img name=”button1“ scr=
->"button_off.png">
Другие элементы нужно идентифи-
цировать с помощью атрибута id:
<div id-"layer1"></div>
Стандарт XHTML не использует ат-
рибут name и заменяет его атрибутом
id. Эта опция очень удобна для новых
браузеров, но может привести к конф-
ликту в более ранних браузерах. Хо-
рошо то, что в переходной версии
XHTML вы можете использовать оба
к^атрибута (на всякий случай)._____
D0M - путеводитель
по Web-странице
Написав письмо, вы указываете на конвер-
те страну, город, улицу, номер дома адре-
сата и, конечно, его имя. Примерно так
выглядел бы этот процесс в JavaScript:
usa.newyork.sesameST.123.ernie. Затем со-
общение отсылается получателю.
Почтальон прочитает адрес и найдет на
карте точное местоположение адресата.
В Нью-Йорке на улице Сезам в доме № 123
живет только один Эрни, поэтому вы мо-
жете быть уверены, что письмо дойдет до
адресата. Если вы хотите послать письмо
кому-то, чей адрес совпадает с адресом
Эрни, вам нужно лишь изменить имя:
usa.newyork.sesameST.123.bert.
Эти два адреса очень похожи, но все же
они уникальны.
Модель DOM позволяет вам находить
«адрес» (или узел) для различных элемен-
тов на вашей Web-странице. Затем вы
можете с помощью JavaScript отправить
объекту на определенном узле сообщение
с информацией о том, что следует делать
данному объекту.
DOM описывает путь, который начинается
в окне и проходит через различные объек-
ты на Web-странице. В примере описана
объектная модель документа для картинки
button 1: window.document.images, button 1.
Например, листинг 10.1 разделен на узлы,
как показано на рис. 10.2.
В данном случае DOM - адрес картинки,
которая находится в документе в текущем
окне и называется button 1.
Если вы хотите получить доступ к картин-
ке button2, воспользуйтесь DOM:
window.document.images.button2.
8 Тиге Дж. К
12261 Объектная модель документа и события
Например, для того, чтобы функция Ja-
vaScript послала объекту сообщение о
том, какую картинку он должен отобра-
зить (scr) нли какой CSS-стиль использо-
вать (style), следует указать путь:
window.document.images.button 1.scr=
->"button_on.gif ”
Этот метод неплохо работает при доступе
к картинкам.
Узел окна/рамки
Узел документа
<!DOCTYPE>
Узел типа документа
<head>
Узел элемента
Узел формы
<form>
Узел формы
zz
<html>
Узел элемента
—t.......
3
) Г<body>
J I Узел элемента
<img> I | “Your message here'
Узел изображения J I Узел текста
Рис. 10.2. Узел Web-страницы начинается вверху окна и перемещается к каждому
отдельному элементу на странице
DOM - путеводитель по Web-странице [227]
Таблица 10.1. Что позволяет делать D0M
Возможность Совместимость
Изменение шрифта IE4, N6, S1,
и текста элемента, 03-5, DOM1
который находится
на экране
Изменение z-индекса IE4, N4, S1,
элементов 03-5, DOM1
Скрыть/отобразить IE4, N4, S1,
элементы на экране 03-5, DOM1
Изменение положения IE4, N4, S1,
элементов 03-5, DOM1
Анимация элементов IE4, N4, S1,
на экране 03-5, DOM1
Посетители могут IE4, N4, S1,
перемещать объекты 03-5, DOM1
на экране
Изменение видимой IE5, N4, S1,
области элемента 03-5, DOM1
Изменение содержимого Е4, N6, S1,
страницы, которая уже 1 03-5
была загружена
CSS-слои
Часто объекты, которые используют
ID, называются слоями. Это может
привести к путанице, так как термин
«слой» предназначен для описания по-
хожей технологии в Netscape. HTML-
тег легко превратить в CSS-слой, доба-
вив атрибут ID. Тот же результат дос-
тигается в Netscape при использовании
тега <1ауег>.
Термин «слой», по-видимому, отно-
сится к CSS-объектам. Слои Netscape
скоро уйдут в прошлое, так как по-
следняя версия Netscape (6) их не под-
держивает.
Чтобы избежать путаницы, в этой кни-
\ге под слоями понимаются CSS-слои.
Более ранние версии Netscape и Internet
Explorer включали свои версии DOM, ко-
торые работали по-разному. Это напоми-
нает разную систему адресации писем для
различных стран. Письма из одной страны
не могут быть посланы в другую страну.
W3C опубликовала стандартную модель
DOM, с которой работают и Netscape 6+, и
Internet Explorer 5+. Кроме того, Safari и
Opera тоже используют стандартную мо-
дель DOM W3C. Вы можете работать всего
с одним стандартом! В этой книге мы, в
первую очередь, будем использовать стан-
дартную модель DOM W3C.
Перед тем как поговорить о том, как с по-
мощью DOM вносить изменения в Web-
страницу, нам следует рассмотреть некото-
рые ключевые понятия: объекты и события.
® Свойства Web-страниц, созданных с помо-
щью CSS, можно изменять даже в тот мо-
мент, когда они находятся на экране, то
есть динамически, используя язык написа-
ния сценариев и D0M (табл. 10.1). Многие
в качестве языка написания сценариев при-
меняют JavaScript, так как этот язык мак-
симально доступен. Однако на CSS можно
влиять и с помощью других языков, кото-
рые поддерживает ваш браузер. Например,
в Internet Explorer используется язык
VBScript.
| Когда вы посылаете письмо адресату, на-
(j ходящемуся в вашей же стране, необяза-
।1 тельно указывать ее название. Так же про-
исходит при определении окна, на которое
вы хотите ссылаться с помощью DDM.
Предполагается, что это будет окно, в ко-
тором находится код. Таким образом, D0M
начинается с document.
|228| Объектная модель документа и события
История D0M
W3C осознала, что со временем появится необходимость связать языки кодировки
с объектами на Web-странице, и начала вырабатывать оптимальную методику для
решения этой задачи. К сожалению, компании-производители браузеров не могли
ждать и представили свои модели DOM до того, как W3C установила стандарт.
Лучше поздно, чем никогда: W3C выпустила новую стандартную модель DOM в
конце 1998 г. Эта модель была призвана объединить различные технологии брау-
зеров.
Модель DOM Netscape Layer позволяет вам писать скрипты для управления эле-
ментами, которые создаются с помощью тега <1ауег>, а также элементами, кото-
рые создаются с помощью CSS-позиционирования. Эта модель DOM дает вам воз-
можность управления положением, видимостью и обрезкой элемента. Изменения
свойств, внесенные с помощью слоев или CSS-позиционирования, немедленно
отображаются на странице.
Модель Layer DOM не предлагает доступа к CSS-параметрам, за исключением уп-
равления позиционированием. Таким образом, вы не можете изменить шрифт,
текст, список, курсор мыши, цвет, фон, границу или поля объекта в Netscape 4
после загрузки страницы без дополнительной перезагрузки.
Модель Layer DOM не работает в Netscape 6 или более поздних версиях, а версия
Netscape 5 и не существовала. Когда компания Netscape приступила к планирова-
нию Netscape 6 (ядро Mozilla), было принято решение начать работу с эскиза и
попробовать создать браузер, который был бы совместим с максимально большим
количеством стандартов. К сожалению (и это смутило многих Web-дизайнеров),
это привело к тому, что многие технологии, которые не могли бы стать стандарт-
ными (включая тег <1ауег> и модель Layer DOM), были забыты.
Модель Internet Explorer All DOM. Модель Internet Explorer All DOM позволяет вам
писать скрипты, которые могут получить доступ к любому элементу на экране (по
крайней мере, к любому элементу, который воспринимается Internet Explorer). Эти
элементы включают параметры CSS, которые позволяют вам управлять позицио-
нированием и видимостью элементов на экране, а также их внешним видом. Лю-
бые изменения данных параметров немедленно отображаются на экране, и Internet
Explorer соответствующим образом изменяет ее внешний вид.
Таким образом, любые изменения шрифта, текста, списка, курсора мыши, цвета,
фона, границы, полей, позиционирования или видимости объекта проявляются
мгновенно.
г
Создание объекта [229]
:g 0 0 DHTML & CSS for the WWW I Creating Ал Object________________ СЭ
ThHts Object 1
Рис. 10.3. С помощью JavaScript и DOM можно
динамически воздействовать на слои
I
Создание объекта
Объект - это HTML-элемент (см. раздел
«Что такое элемент» в главе 5), который
определен с помощью ID (или, если это
картинка, с помощью атрибута name).
У HTML-элемента есть уникальный адрес
в окне браузера, который позволяет обра-
щаться к нему с помощью DOM.
Модель DOM может получить доступ к не-
которым объектам благодаря типу элемен-
та, к которому они относятся. Например, к
формам и изображениям можно обра-
щаться с помощью их положения в форме
или диапазоне для страницы. Тем не ме-
нее, эту опцию бывает сложно использо-
вать, и чаще всего более предпочтительно
задать для элемента уникальное определе-
ние. Любой элемент в окне браузера (по
крайней мере, любой элемент, окружен-
ный HTML-тегами) может быть иденти-
фицирован с помощью атрибута id. Иден-
тификация позволяет элементу получить
свой собственный уникальный адрес, а
также преобразовать элемент в объект.
Определяя HTML-элемент (рис. 10.3) как
объект, вы получаете возможность менять
любые его свойства, по крайней мере те,
что позволит вам изменить браузер.
1230 j Объектная модель документа и события
Определение объекта
1. tfobjectl {position: absolute;}
Добавьте ID-правило в CSS, установи-
те абсолютное или относительное по-
ложение элемента (см. «Определение
ID для идентификации объекта» в гла-
ве 2). Вы можете ввести и другие опре-
деления, но сначала нужно задать этот
слой как CSS-слой (листинг 10.2).
2. <div id="object1>...</div>
Примените ID к HTML-тегу. Для слоев
с абсолютным положением лучше ис-
пользовать тег <div>, а с относитель-
ным -тег<эрап>. Обратите внимание,
что в этом примере при помощи тега
<div> частью объекта становится не
только изображение рядом с текстом, но
и все элементы соответствующего тега.
Вам не нужно настраивать объект в точно-
сти так, как указано в пункте 1. Все, что вам
необходимо сделать, - это добавить в тег
уникальный ID, как показано в пункте 2.
Обработчики событий
В мире JavaScript событиями называются
какие-либо действия в окне браузера, ини-
циатором которых обычно является посе-
титель. Например, если посетитель наво-
дит указатель мыши на ссылку, то проис-
ходит событие mouseover.
События происходят, когда браузер вы-
полняет какое-либо действие, например
загружает новый документ (load) или по-
кидает Web-страницу (unload).
Листинг 10.2. CSS-слой устанавливается с помощью
определения тега с ID, положение которого может
быть абсолютным или относительным
<html>
<head>
<style type="text/css">
#object1 {
position: absolute:
top: 100px;
left: 150рх;
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>
Когда происходит это событие...
| ...сделай следующее
onmouseover = “toggleQ; if (a==b) {x=y; alertfdonVt tread on me!1))’
Рис. 10.4. Синтаксис обработчика события
Обработчики событий [231~|
Обработчик события (event handler), син-
таксис которого - название события с пред-
шествующим ему словом «оп» (onload),
^позволяет определять действия, связанные
с каким-либо событием (рис. 10.4).
В табл. 10.2 перечислены обработчики собы-
тий, которые используются чаще всего. По-
сетите сайт www.webbedenvironments.com/
dhtmVeventhandlers/, чтобы увидеть все эти
события на одной странице. Она создана
мной, чтобы продемонстрировать работу
обработчиков событий (рис. 10.5).
Рис.10.5. На сайте www.webbedenvironments.com/
dhtml/eventhandlers/ представлены все примеры
событий, которые обсуждаются в этой главе
Таблица 10.2. обработчики событий
Событие Когда происходит На что влияет
onLoad После загрузки объекта Документы и картинки
onllnload При выгрузке объекта Документы и картинки
onFocus При получении элементом фокуса Документы и формы
onBlur При потере элементом фокуса Документы и формы
onHouseOver Указатель мыши проходит над областью Ссылки и области картинок
onMouseOut Указатель мыши выходит из области Все*
onClick При щелчке мышью на области Все*
onMouseDown Кнопка мыши нажата Все*
onMouseUp Кнопка мыши отпущена Все*
onMouseMove Мышь двигается Документ
onKeyDown Клавиша на клавиатуре нажата Формы
onKeyUp Клавиша на клавиатуре отпущена Формы
onKeyPress Клавиша нажата и сразу же отпущена Формы
onResize*- Изменяются размеры окна браузера или фрейма Документ
onMove*** Окно браузера перемещается Документ
* Картинки и области картинок только в Netscape 4
“ Не поддерживается в IE4
*** Не поддерживается в IE4/5 и Netscape 6
12321 Объектная модель документа и события
Обработчики событий и D0M
Если вы уже использовали какой-нибудь
язык кодировки для HTML-страниц, ско-
рее всего, вы видели, как работает DOM.
Модель DOM описывает путь от функции
JavaScript до элемента на экране, отвечая
на событие, которое было вызвано дей-
ствием в окне браузера (рис. 10.6).
I I Обработчик событий может выполнять
V Функции JavaScript, но код JavaScript еле-
----- дует включать непосредственно в кавычки.
I I На первый взгляд кажется, что onClick
MonMouseUp выполняют одну и туже функ-
----- цию. Событие click происходит после
того, как кнопка мыши нажата и отпущена.
События mouseDown и mouseUp разбивают
его на два отдельных события, с каждым
из которых ассоциируется свое действие.
® Может показаться, что атрибут href дей-
ствует как обработчик события onClick, но
это не так. Если запустить DHTML-код из
данного события, он, возможно, не будет
выполняться.
I Л I Большинство изменений стиля объектов,
I (J сделанных с помощью D0M, должны акти-
-----1 вироваться с помощью триггера события.
Временами JavaScript должен активировать-
ся событием, чтобы начать работать. Я по-
тратил очень много времени, чтобы опреде-
лить, что же не работает в JavaScript. В ре-
зультате оказалось, что я всего лишь забыл
добавить триггер от события к скрипту.
Действие
Реакция
Действие Событие JavaScript DOM Реакция
src='bijtton_off gif onmouseover togglei) document. Ing. buttonl Srcs-button_on.gif
Пользователь Браузер понимает, Браузер Браузер устанавливает Источник
перемещает мышь что с объектом определяет действие положение объекта картинки
над объектом что-то происходит над объектом на Web-странице изменился
Рис. 10.6. Процесс начинается с действия пользователя (mouseover) и заканчивается реакцией
браузера. Браузер распознает событие, запускает функцию и использует DOM, чтобы заменить
изображение
г
Триггеры событий 1233 ]
Рис. 10.7. Первоначальное состояние
рисунка
*
Рис. 10.8. Рисунок, на который наведен
указатель мыши
Листинг 10.3. Когда посетитель проводит
указателем мыши по области ссылки с картинкой
b_off.gif, эта картинка заменяется другой
(b_on.gif)
>i Листинг;^:.<,;сэ~|
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML
->1.D Transitional//EN" "http://ww.w3.org/
->TR/xhtmll/DTD/xhtmll-transitional.dtd”>
<html xmlns-’http://www.w3.org/1999/xhtmr’>
<head>
<meta http-equiv=”content-type"
->content="text/html;charset=utf-8” />
<title>DHTML & CSS for the WWW |
-^Detecting Events</title>
</head>
<body>
<a href=”#” onmouseover=”document.
->getElementById(‘object1’).
->src=' b_on.gif ”
<img id="object1" src=”b_off.gif"
->border=''0" />
</a>
</body>
</html>
Триггеры событий
Обработчик события связывает действие,
происходящее в окне браузера, с функцией
JavaScript, которая, в свою очередь, вызыва-
ет реакцию, или ответное действие, в окне
браузера.
Когда посетитель проводит мышью по
изображению ромба (рис. 10.7), ромб
превращается в треугольник (рис. 10.8).
Связывание обработчика
с событием
1. <а href="a”
Напишите тег, в который требуется
добавить обработчик события. Обыч-
но это тег <а> или один из тегов форм
(листинг 10.3).
2. onmouseover=
Введите в этот тег название нужного
события (табл. 10.2) и поставьте знак
равенства.
3. "document.getElementByld('object1').
->style.top
Поставьте открывающую кавычку, по-
том - код JavaScript, который будет вы-
полняться, когда произойдет событие,
и закройте кавычки. Код JavaScript мо-
жет быть любым, в том числе включать
вызов функций. Если вы хотите, чтобы
в одном обработчике событий выпол-
нялось несколько строк JavaScript, раз-
делите их точкой с запятой, но не ис-
пользуйте клавишу Enter.
12341 Объектная модель документа и события
4. Повторив шаги 2 и 3, вы можете доба-
вить столько обработчиков событий,
сколько потребуется.
5. >
Напишите закрывающую угловую скоб-
ку, чтобы завершить тег шага 1.
6. <img scr="button_off.gif" name=
->"buttonl">
Добавьте картинку, текст или любое
другое HTML-содержимое, с которого
должно начаться событие.
7. </а>
Введите закрывающий тег ссылки или
формы.
Куда перемещается триггер события?
Чтобы добиться обратной совмести-
мости с Netscape 4, вы можете помес-
тить события в теги <body>, <form>
или связать теги <а>.
В Netscape 6 и Internet Explorer 4/5/6
события разрешается создавать в лю-
бом элементе окна браузера. Таким
образом, любой обработчик событий
можно разместить с помощью соот-
ветствующего ему тега. Например,
тег <р> используется для создания со-
бытия onmouseover.
Так как Netscape 4 охватывает менее
одного процента рынка браузеров,
большинство дизайнеров свободно
используют триггеры для любых
объектов. Если вы решите делать так-
же, мы рекомендуем поместить на ва-
шем сайте сообщение с информацией
для пользователей Netscape 4 о том,
что ваш сайт не поддерживает данный
браузер.
Функционирование DOM 12351
document.getElementByld('object1').style.top
Рис.10.9. Модель Netscape 4 Layer DOM для
доступа к параметру top CSS
Листинг 10.4. Функция JavaScript, которая
использует модель W3C ID DOM. DOM описывает
путь к определенному слою, чтобы найти его
положение. Затем с помощью JavaScript данное
положение переназначается
> <!D0CTYPE html PUBLIC //W3C//0TD XHTML
->1.D Transitional//EN" "http://ww.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http.//www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type"
->content=”text/html;charset=utf-8” />
<title>DHTML & CSS for the WWW |
->Using the DOM</title>
<script language-'Javascript"
->type="text/javascript">
function moveObjectO {
var object=document.getElementByld
-> (‘objectl’):
object.style.top=60 + ‘ px';
object.style.left=120 + 'px';
}
</script>
<style type="text/css’' media-’screen"><’-
#objectl {
visibility:visible;
position: absolute;
top: 10px;
left: Юрх
}
-></style>
</nead>
<body>
<div id="object1” onclick='’moveObject()” >
This script will run in any browser
->that uses the W3C’s standard<br />
for DOM, including Internet Explorer 5
->and Netscape.<br />
<img src="aliceD4.gif" height="298"
->width="200’’ bOrder="0" />
</div>
</body></ntml>
Функционирование DOM
W3C ID DOM (или стандартная модель
DOM) позволяет вам писать скрипты, ко-
торые могут получать доступ к любому
объекту на экране (рис. 10.9). Благодаря
этому вы можете вносить изменения в лю-
бой параметр CSS, то есть управлять по-
зиционированием и видимостью объек-
тов на экране, а также их внешним видом.
Любые изменения параметров немедленно
отображаются на экране.
Таким образом, вы сможете сразу увидеть
результаты любых изменений шрифта,
текста, списка, курсора мыши, цвета,
фона, границы, поля, положения или ви-
димости объекта.
Использование D0M
для адресации объекта
1. var object =
Создайте переменную object, кото-
рая будет хранить адрес объекта (лис-
тинг 10.4).
2. document.
Начните с идентификации положения
объекта. Если вы адресуетесь к объек-
ту на той же странице, просто исполь-
зуйте параметр document и введите пе-
риод. Если вы адресуетесь к объекту в
другом окне, начните ввод с параметра
window., затем введите имя окна и пе-
риод. Если вы адресуетесь к объекту в
другом кадре, воспользуйтесь парамет-
ром top. или parent., затем введите имя
кадра и период.
12361 Объектная модель документа и события
3.getElementBylD (‘objectl’);
Добавьте параметр getElementBylD, за-
тем введите в скобках ID объекта. ID
может быть как точным идентифика-
тором объекта в кавычках, так и строч-
ной переменной, которая содержит имя
объекта.
4. object.style.top = 60 + ‘рх’;
Чтобы изменить атрибут объекта, ис-
пользуйте переменную object с перио-
дом, затем введите имя того атрибута,
который нужно изменить. Если это ат-
рибут CSS (например, top), вам понадо-
бится также добавить style до имени
атрибута (рис. 10.10).
Е Листинг кода, приведенный здесь, исполь-
зует стандартную модель W3C DOM, кото-
рая не будет работать в Internet Explorer 4
или Netscape 4 (табл. 10.3). Если вам нуж-
но выполнить кодировку для устаревших
браузеров, обратитесь к разделу «Опреде-
ление типа D0M для обратной совместимо-
сти» далее в этой главе.
Е Обратите внимание, что если вы желаете
задать значение для параметра top или
left, вам необходимо добавить в коды +
' рх' при вводе значений. Чтобы сохранить
совместимость с XHTML, все значения
style должны быть присвоены в качестве
строк. Это простой способ превращения
числа в строку. Если ваш DHTML-код не
работает, убедитесь в том, что вы преоб-
разовали все числовые значения в строки.
Таблица 10.3. Браузеры, совместимые с DHTML
Браузер Версия DOM
Netscape 4 Layer
6+ W3C
Internet Explorer 4 All
5+ All, W3C
6 All, W3C
Safari 1 + W3C
Opera 3-5+ W3C
Рис. 10.10. Объект перемещается из начального
положения через экран. Это происходит в ответ на
активацию функции, которая использует D0M для
адресации объекта
Функционирование DOM 1237
DHTML в Netscape 4
Одним из многих недостатков Netscape 4 является то, что он допускает активацию
многих событий (включая onclick) с помощью тега ссылки (<а>). К тому же Netscape 4
часто использует для решения одних и тех же задач синтаксис, который существен-
но отличается от Internet Explorer и даже Netscape 6+. В этом примере нам пришлось
закодировать назначение переменных moveLeft и moveTop, так как Netscape 4 не мо-
жет использовать строки в качестве значений для параметров стиля, а это необходи-
мо для совместимости с XHTML. Это только вершина айсберга, с которым вам при-
дется столкнуться при выполнении кода для Netscape 4.
Кодировка далее в этой книге основана на стандартной модели W3C DOM, и боль-
шая часть данного кода не будет работать в Netscape 4. Если вам нужно просмотреть
образцы кодировки, которая сможет работать в Netscape 4, вы можете загрузить ее с
Web-сайта поддержки для второго издания книги: www.webbedenvironments.com/
dhtml/2nd/index.html.
12361 Объектная модель документа и события
Передача событий
функции
Все события в окне браузера генерируют
определенную информацию о том, что
именно произошло, где это произошло и
как. Вы можете передавать эту информа-
цию напрямую функции JavaScript, чтобы
она могла обращаться к объекту без при-
менения методики getElementBylD.
Как и во многих других случаях, Internet
Explorer и Netscape используют различ-
ные способы для передачи событий. Тем
не менее, эти разные способы легко ком-
бинировать.
Передача события функции
JavaScript
1. function passItOn()
В переменных, которые передаются
функции, добавьте переменную evt,
чтобы записать событие.
2. van evt = (evt) ? evt :
->((window.event) ? event : null);
Internet Explorer использует немного
другой синтаксис для отслеживания со-
бытий. Эта строка кода позволит до-
биться совместимости между версией
Internet Explorer и стандартом W3C для
переменной evt.
3. alert(evt.clientX);
Теперь вы можете использовать пере-
менную evt, чтобы получить доступ к
информации о событии. В этом приме-
ре мы получаем доступ к положению по
оси х для того места, где был выполнен
щелчок мыши (рис. 10.11).
Рис.10.11. При щелчке на странице отображается
предупреждение, в котором показано положение
по оси х, где был произведен щелчок мыши
Внимание! Результаты могут быть
разными
Если вы используете предупреждение,
чтобы отобразить значение перемен-
ной object (например,alert (object)),
вы увидите различные результаты в за-
висимости от того, в каком браузере вы
работаете. Например, Internet Explorer
для Windows отобразит [object]. Вме-
сто того чтобы показать вам настоящее
значение, многие браузеры отобразят
переменную, которая потом будет ис-
пользоваться для доступа к объекту. Не
волнуйтесь: эта переменная содержит
ту же самую информацию.
Передача событий функции |239~|
Листинг 10.5. Переменная event передает
функции информацию о событии, включая
информацию о том, где находился курсор мыши
в момент щелчка
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML
->1.0 Transitional//EN" '‘http://www.w3.org/
->TR/xhtmli/DTD/xhtmll-transitional.dtd”>
<html xmlns-”http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type”
->content="text/html;charset=utf-8" />
<title>DHTML & CSS for the WWW |
->Passing Events to a Function</title>
<script><'-
function passItOn(evt) {
var evt = (evt) ? evt :
-> ((window.event) ? event : null);
alert(evt.clientX)
evt.cancelBubble;
}
// ~>
</SCript>
«style type-’text/css" media="screen'’><!-
Itobjecti {
visibility: visible;
position: absolute; ,
top: Юрх;
left 1Dpx
}
-x/style>
</head>
<body>
-xdiv id=”object1" onclick="passlt0n
(event)">
<img src="alicel3.gif” height=”4B0”
->width=”i74" border-’O” />
</div>
</body>
</html>
4. evt.cancelBubble;
Чтобы событие перестало воздейство-
вать на другие объекты на странице,
добавьте параметр evt. CancelBubble.
Этот параметр можно опустить, но
иногда бывает так, что событие влия-
ет на объекты на странице нежела-
тельным образом.
5. onlick=”pass!tOn(event)"
Добавьте один или несколько триггеров
к объекту для активации функции (лис-
тинг 10.5). Передайте переменную event
функции, включая информацию о со-
бытии, которое активируется. В этом
примере событие будет активировано в
том случае, если пользователь щелкнет
по изображению.
Е Переменная evt не может получать прямой
доступ к событию. Вам придется привязать
событие к объекту, а затем воспользовать-
ся ID для доступа к объекту. За дополни-
тельной информацией обращайтесь к сле-
дующему разделу «Привязка событий к
объектам».
^“1 Хотя может показаться, что передача собы-
Q тий к функции является универсальным спо-
---1 собом для создания DHTML, даже зта мето-
дика имеет свои недостатки. Например,
Internet Explorer не всегда реагирует на собы-
тия, которые происходят в подчиненных эле-
ментах тега, содержащего триггер. Кроме
того, изменяемый объект совершенно нео-
бязательно должен быть тем же объектом,
который изначально содержал событие.
Я обычно использую метод getElementBylD
для кодировки в этой книге, за исключени-
ем случаев, когда передача событий предо-
ставляет какие-либо преимущества.
12401 Объектная модель документа и события
Привязка событий
к объектам
Если вы желаете реагировать на событие,
применяйте к тегу объекта триггеры. Но су-
ществует и другая полезная методика: при-
вязка события к одному или нескольким
объектам. Затем вы сможете воспользо-
ваться переменной evt, чтобы получить до-
ступ к объекту и внести изменения в него
(при этом вам не придется в первую оче-
редь определять ID объекта).
Добавление общего триггера на
Web-страницу
1. functor initPage () {...}
Добавьте функцию initPage () в ваш
JavaScript. Эта функция подготавлива-
ет использование общих триггеров, за-
тем задает функции, которые будут
выполнены при активации этих триг-
геров (листинг 10.6). Обратите внима-
ние, что если вы вызываете функцию:
document.onclick = errorOn;
то вам не нужно добавлять скобки при
вызове функции. Для настройки собы-
тия узла документа вы можете исполь-
зовать любой триггер, указанный в
списке «События» ранее в этой главе.
Листинг 10.6. Функция errorDn() связана
с документом, а функция moveTo() - с объектом
object!
COOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.D Transitional//EN" ‘'http://www.w3.org/
->TR/xhtmH/DTD/xhtmll-transitional. dtd”>
<html xmlns-’http://www.w3.org/l999/xhtmr>
<head>
<meta http-equiv=''content-type"
->content="text/htral;charset=utf-8" />
<title>DHTML & CSS for the WWW |
->Binding Events to an Object</title>
<script><!-
function initPage() {
document.onclick = errorOn;
document.getElementByld
->('object1’)-onclick =
->moveObject;
function errorOn() {
alert (‘Please do not click here
->again!')
}
function moveObject (evt) {
var evt = (evt) ? evt : ((window.
->event) ? event : null);
var object - document.get
->ElementById (this.id);
var moveLeft=evt.clientX;
var moveTop=evt.clientY;
object.style.left = moveLeft + ' px';
object.style.top = moveTop + ‘px';
}
// ->
</script>
<style type-'text/css" media="screen"><! -
«object! (
visibility: visible;
position: absolute;
top: Юрх;
left: Юрх;
-></style>
Привязка событий к объектам )2411
Листинг 10.6 (окончание)
m_____________ Листинг о~|
</head>
<body onload=”initPage()’’>
<div id="object1">
<img src="alicel3.gif" height=''48O’'
->width=”i74'’ border="0” alt=”alice"
->/></div>
</body>
</html>
POO DHTML & CSS for tht WWW I Binding Cvtntt tc-O
Рис. 10.12. При щелчке no объекту он
перемещается. Если вы щелкните в другом месте
окна, появится предупреждение с просьбой
не щелкать здесь
2. function e/ror0n(evt) {...}
function moveTo() {...}
Добавьте в ваш JavaScript функции, ко-
торые будут запущены в том случае,
если обнаружится соответствие собы-
тиям, указанным в пункте 1 функции.
В этом примере функции errorOn() и
move0bj ect () активируются в том случае,
если события onclick активируются в
окне браузера или на объекте object 1.
Для функции moveObject () мы передаем
переменную evt (см. предыдущий раз-
дел «Передача событий функции»), что
позволяет нам увидеть информацию
об активированном событии. Затем
для адресации события, которое мы
желаем изменить, мы можем исполь-
зовать:
var object = document.getElementsBylD
->(this.id);
Где this, id сообщает функции о необ-
ходимости использовать ID активиро-
ванного события. Эта команда будет
работать только в том случае, если со-
бытие было привязано к объекту.
3. onload = “initPageO”
Добавьте триггер в тег <body>, чтобы
активировать функцию, которую вы
создали в пункте 1. При активации
функции будут инициализированы
привязанные к странице события
(рис. 10.12). Если этот пункт пропущен,
ничего не произойдет.
I | Обратите внимание, что при щелчке по ри-
(j сунку изображение переместится, а также
1---- отобразится предупреждение, поскольку
активируются оба события. При щелчке по
пустому месту на экране активируется
только функция errorOn().
12421 Объектная модель документа и события
Определение
возможностей браузера
Лучший способ определить, есть ли у брау-
зера, в котором работает ваш сценарий,
возможности для выполнения конкрет-
ной работы, - это спросить у него самого.
Узнать, обладает ли браузер необходимы-
ми вам характеристиками, гораздо про-
ще, чем кажется. Для этого нужно всего
лишь дописать одну строчку в каждой
функции.
В большинстве случаев используется ме-
тод определения возможностей браузера,
а не метод определения браузера (см. раз-
дел «Название и версия браузера» в гла-
ве 11). Допустим, текущая версия браузе-
ра не позволяет запускать ваш сценарий.
Не исключено, что вскоре появится новая
версия, которая разрешит это сделать.
Метод определения характеристик дает
возможность любому браузеру, в кото-
ром способен работать сценарий, запус-
кать его (рис. 10.13 и 10.14).
ООО DHTML t CSS for the W>yw | thing feature Sensing Q
Yes, I can change images.
Рис. 10.13. Этот браузер может менять картинки
Рис. 10.14. Во многих старых браузерах, таких как
Internet Explorer 3, не предусмотрена возможность
изменения картинок. На экране отображается
соответствующее сообщение
Определение возможностей браузера 12431
Листинг 10.7. В этом примере проверяется,
доступен ли объект document, images в браузере
• 66 ... ..о]
<'D0CTYPE html PUBLIC "-//W3C//0TD XHTML
->1.0 Trarisitional//EN" “http://www.w3.org/
- >TR/xhtmll/DT0/xhtml1-transitional. dtd”>
<html xmlns=”http://www.w3.org/l999/xhtml’’>
<head>
<meta http-equiv-'content-type”
->content=”text/html;charset=utf-8” />
<title>OHTML & CSS for the WWW |
->Using Feature Sensing</title>
</head>
<body>
<script language=”JavaScript”>
if (document.images) {
document.writeln('<hl>Yes, I can
->change images.</h1>');
}
else {
document.writein('<h1>Sorry.
->I cannot change images.</hl>');
}
</script>
</body>
</html>
Доступ браузера к какой-либо
возможности JavaScript
1. if (document.images)
Внутри контейнера JavaScript напишите
условие, как показано в листинге 10.7.
В скобках после if введите DOM для тре-
буемой функции JavaScript. В этом при-
мере проверяется, может ли браузер ра-
ботать с графическими изображениями.
2. {document.writeln("Yes, I can change
images.”);}
В фигурных скобках поместите код
JavaScript, который будет выполняться,
если данная возможность поддержива-
ется браузером.
3. else {document.writeln("Sorry. Ican't
change images.");}
Можно добавить ветвь else, определив
код, который будет выполняться, если
проверяемая возможность JavaScript не-
доступна.
12441 Объектная модель документа и события
Построение общей DOM
Ранее мы говорили о том, что Netscape 4
и Internet Explorer 4 используют различ-
ные модели DOM для адресации объектов
в документе. Если вам приходится выпол-
нять кодировку для двух браузеров, это
может быть очень болезненным. Но не
беспокойтесь, - существует более простой
способ заставить оба браузера работать
синхронно с их более новыми версиями.
Это новая стандартная модель W3C DOM.
Информация, возвращаемая при опреде-
лении типа DOM в браузере, позволяет
создать DOM для каждого объекта Web-
страницы, отображаемой браузером. Ос-
новная идея - включить методы опреде-
ления всех трех типов DOM в функцию
findDDM(), в которой для задания типа
DOM применяется оператор if. DHTML-
функция использует затем findDOM, чтобы
построить DOM для каждого объекта и по-
лучить доступ к его свойствам (рис. 10.15,
листинг 10.8).
Определение типа D0M
для обратной совместимости
1. function findDOM(objectID,withStyle)
Добавьте в код JavaScript функцию
findDOM. Ее аргументом является ID тре-
буемого объекта, а результатом - DOM
в используемом браузере. Затем с помо-
щью данной функции можно изменять
стиль объекта (if withStyle=l) или дру-
гие его свойства (if withStyle=O).
Рис. ЮЛ 5. Функция findDOMO позволяет этому
скрипту работать в любом DHTML-браузере,
включая Netscape 4 и Internet Explorer 4
Листинг 10.8. Скрипт Cross Browser DOM
использует функцию обработки, чтобы
определить, какая модель D0M используется,
а затем с помощью этой информации обращается
к объекту или стилям объекта (если переменная
Style задана как 1) посредством D0M браузера
.... .. - Листинг . „ о]
<html>
<head>
<meta http-equiv="content-type”
->content="text/html; charset=utf-8’'>
<title>DHTML & CSS for the WWW |
^Detecting the DOM Type for Backward-
->Compatibility</title>
<script><!-
function findDDM(objectID, withStyle) {
if (withStyle) {
if (document.getElementById) return
-> (document.getElementByld(objectlD).
->style) ;
else if (document.all) return
- > (document.allfobjectID],style);
else if ((navigator.appName.indexOf
- > (‘Netscape’) l= -1) && (parselnt
- > (navigator.appVersion) 4)) return
-> (document.layersfobjectlD]);
}
Построение общей РОМ [2451
Листинг 10.8 (окончание)
fcSUB . Лмотйнг..;.;-л^;.^,
else {
if (document.getElementByld} retu rn
- > (document.getElementByld(objectlD)) ;
else if (document.all) return
- > (document.alirobjectlDJ);
else if ((navigator.appName.indexOf
- > (‘Netscape’) != -1) && (parselnt
- > (navigator.appVersion) == 4)) return
- > (document.layersfobjectlDJ);
>
>
function moveObject (objectID) {
var objectstyle = findDOM(objectID,true);
if (document getElementByld) {
moveLeft = 120 + ‘px’;
moveTop = 60 + 'px';
}
else {
moveLeft = 120;
moveTop = 60;
}
objectstyle.left = moveLeft ;
objectstyle.top = moveTop;
}
И ->
</script>
<style type=”text/css” media=”screen"><!-
ffobjectl {
visibility: show:
position: absolute;
top: Юрх
left: Юрх
)
-x/style>
</head>
<body>
<div id=''object1">
<a onclick=‘’moveDbject(‘object1’)”
->href="»”>
<img src=’’alicel4.gif” alt=”alice”
->border=”0"> </ax/div>
</body>
</html>'
2. if (isID) {return (document.
->getElementById(object ID).style);}
Каждый тип DOM проверяется для
того, чтобы выяснить, какой из них ис-
пользуется в этом браузере. Если isID=1
(true), то условие выполняется и для оп-
ределения положения объекта на Web-
странице применяется W3C ID DOM.
3. var objectStyle = findDOM
->(objectI0, true);
В вашем JavaScript настройте функцию,
которая будет активировать функцию
findOOMQ. В этом примере мы задали
две переменные. Эта переменная запи-
сывает DOM со стилем:
var objectstyle = findDOM
->(objectID, true);
Эта переменная записывает DOM без
стиля:
var object = findDOM
->(objectID, false);
4. onclick="moveObject(‘object’)”
Используйте триггер, чтобы активи-
ровать функцию, которую вы задали
в пункте 3.
Итак, различные DOM переведены на один
общий язык. Теперь можно задействовать
его для управления элементами на экране
с помощью функций JavaScript.
(РЖ fi КОТОРОМ
Ш РШШС
11
«Познай себя, прежде чем изменять мир».
Возможно, это старая поговорка, а может
быть, я придумал ее сам, но данное выс-
казывание как нельзя лучше подходит для
DHTML. Чтобы использовать многие
функции, описанные в последующих гла-
вах, необходимо твердо знать, где какие
теги находятся, каковы их размеры и ка-
кие действия они выполняют.
В этой главе рассказывается о том, что
можно узнать о среде, в которой отобража-
ется объект (например, размер экрана и
окна браузера). Две последующие главы
покажут вам, как находить информацию о
самом объекте (глава 12) и событиях, акти-
вированных объектом (глава 13).
Тип операционной системы
В объекте версии приложения (appVersion)
находится информация не только о номере
версии браузера (см. предыдущий раздел),
но и о типе операционной системы, кото-
рую браузер использует для просмотра
страницы (рис. 11.1 и 11.2). Эта информа-
ция может быть весьма полезной, особенно
если нужно преодолеть проблемы, связан-
ные с типом операционной системы (на-
пример, несоответствие в размере шрифта).
(№№90
№: WKOoni ««!•> WKMTO* OTwTwB. VW.Ssuw] MetrMadTc*
This browser's designation is: Netscape 5.0 (Wmdows; ai-US)
This Browser is running in Hie Microsoft Windows OS.
Рис. 11.1. Код работает в Windows 95
j <QO D»^&(3SfQ7theWWwTDetwO|
I 1 ЙS В ‘ *
I This browser's designation is:
Netscape 5.0 (Macintosh; en-US)
This Browser is running in the Mac OS.
Document' Done 0 j
Рис. 11.2. Тот же код работает в Mac
Тип операционной системы 12471
Определение вида операционной
системы
1, var isMac=0;
Создайте три переменные (isMac, isWin,
isOtherOS) на JavaScript. В них будет за-
поминаться информация о типе опера-
ционной системы, используемой брау-
зером. Сначала этим переменным при-
сваивается значение 0 (false). При на-
хождении типа операционной системы
соответствующей переменной присваи-
вается значение 1 (true) - листинг 11.1.
2. if(navigator.appVersion.indexOf(’Mac’)
!=-1) (isMac=1;}
Проверьте название операционной сис-
темы для того, чтобы переопределить
переменные из шага 1. В этом коде про-
изводится поиск слов «Мас» и «Win».
Если ОС не относится к перечисленным
типам, присвойте переменной isOtherOS
значение 1.
3. else {
if (navigator.appVersion.indexOf
->('Win' ) != -1) {isWin = 1;}
Чтобы определить, используется Win-
dows или нет, вы можете просто найти
Win в версии кодировки и настроить
isWin как 1.
4. else {isOtherOS = 1; }
Наконец, вам нужно добавить перехват
на случай, если используется другая опе-
рационная система (например Linux).
5. if (isMac) {...}
Теперь вы можете использовать для те-
кущей операционной системы те пере-
менные, которые вы задали в пунктах 1
и 2. В этом примере мы просто сделали
так, чтобы на экране появлялось сооб-
щение о том, какая операционная сис-
тема используется.
И Чаще всего метод определения операцион-
ной системы служит для преодоления раз-
личий в размере шрифта и цвете между
Мас и Windows.
ТГ-! Также вы можете добавить команду опреде-
{д ления любой специфической операционной
---- системы, кроме Macintosh и Windows. Все,
что вам нужно знать, - это как операцион-
ная система идентифицируется в строке
appVersion, а затем с помощью метода
indexOf найти нужное слово.
12481 Среда, в которой вы работаете
Листинг 11.1. Сначала на странице появляется полное описание браузера. Затем эта информация
применяется для определения типа операционной системы, и на экран выводится правильное
сообщение
~.....~~........... ,, сэЗ
<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.indexDf(’Hac’) !=-1) {isHac = 1;}
else {
if (navigator.appName.indexOf('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>
Название и версия браузера 12491
This browser's designation Is: Microsoft Internet Explorerd.O
(compatible, MSIE 6 0. Windows NT 5.0; H010818; UB1.2 JE6.0 SP1;
•NET CLR 1.0.3705)
Ibis Browser is compatible with Internet Explorer version 4.
Щ
Рис. 11.3. Этот код работает в Internet Explorer 5.5
под Windows. Обозначение браузера состоит из
различных пол?й (compatible; MSIE 5.5;
Windows 95). Но оказывается, что это Internet
Explorer 4, и в нем можно запускать более старые
версии кода JavaScript
Название и версия
браузера
Чтобы узнать, какие функции браузер
может выполнять, а какие - нет, лучше
всего воспользоваться методом определе-
ния возможностей браузера (см. раздел
«Определение возможностей браузера»
в главе 10). Но иногда необходимо задать
действия, зависящие от типа и версии
браузера, в котором будет отображаться
Web-страница (рис. 11.3-11.5).
Первоначально информация приходит в
виде двух больших объектов программы
(листинг 11.2). В первом из них содержит-
ся название браузера (navigator. appName).
Во втором - версия браузера, информация
о его совместимости и используемая опера-
ционная система (navigator.appVersion).
Сведения о названии и версии полезны, но
они занимают много места в коде. Чтобы
получить необходимые данные, можно
применять эти программы, но затем их
лучше хранить в переменных, которые по-
требуются в дальнейшем.
Рис. 11.4. Код запускается в Netscape 7 на Мас.
Обратите внимание, что показывается версия
Netscape 5. Хотя не существовало официальной
версии Netscape 5, она может служить удобным
разделителем между Netscape 4 и Netscape 6-
совершенно разными браузерами
Рис. 11.5. Код, определяющий браузер, работает
в Opera 5, а на экране написано Internet Explorer.
Многие коды JavaScript «узнают» только Internet
Explorer и Netscape, а другие браузеры
исключаются. Браузеры Opera воспринимаются
как Internet Explorer. Таким образом, код будет
функционировать и в Opera
2501 Среда, в которой вы работаете
Определение типа и версии
браузера
1. var isNS'0.
Создал ie !ри переменные (isIE, isNS,
isOt he; Вi owser) на JavaScript. В них будет
запоминаться информация о том, в ка-
ком браузере работает код. Сначала эти.м
переменным присваивается значение 0
(false). При нахождении типа браузера
соответствующей переменной присваи-
вается значение 1 (true).
2. if (navigator.appName.indexOf
->(’Netscape') 1=-1) {isNS=1:}
Проверьте название браузера для того,
чтобы переопределить переменные из
шага 1. В этом коде в appName прово-
дится поиск слов «Netscape» и «Micro-
soft Internet Explorer». Если браузер не
относится ни к Netscape, ни к Internet
Explorer, то переменной isOtherBrowser
присваивается значение 1.
3. else [ if (navgator.appname.ndexOf
->(’Mi' rosof; Internet Explorer’)
-> '= D (isIE = i;} }
Настроите функцию else, которая де-
лает то же самое, что и функция isIE
для Microsoft Internet Explorer.
4. else ' isOtnerBrowser = 1;}
Наконец, добавьте перехват, чтобы
найти браузер, который не идентифи-
цирует себя как Netscape или Internet
Explorer.
5. browse'Version = parselnt(navgator.
->appV'irson),
Номер версии браузера задается для
переменной browserversion.
Листинг 11.2. Сначала на странице появляется
полное описание браузера. Затем эта информация
используется для определения названия и номера
версии браузера, и на экран выводится
правильное сообщение
асе ~ , .. листинг
<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 1SIE= - 0;
var isOtherBrowser = 0:
if (navigator.appName.indexOf('Netscape')
->'=-1) {isNS = 1;}
else {
if (navigator.appName.indexOf
->('Microsoft Internet
->Explorer') !=-1) {isIE = 1;}
else {isOtherBrowser = 1;}
}
browserversion = parselnt
->(navigator.appVersion};
document write( <br><bi*>’);
if (isNS) {document. wnte('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 +'.'):
</scnpt>
</body>
</html>
Название и версия браузера 1251~|
Определение браузера или его
возможностей
Часто для того, чтобы выяснить, бу-
дет ли DHTML-функция запускаться
в браузере, вместо метода определения
возможностей браузера применяется
метод определения браузера: он позво-
ляет понять, какой код будет работать
в браузерах, которые вы включаете в
список или исключаете из него.
Однако данный метод имеет и недо-
статки. Например, в новых версиях
браузера могут появиться новые функ-
ции, а ошибки, приводившие к нерабо-
тоспособности кода, будут исправлены.
Поэтому там, где допустимо, рекомен-
дуется применять метод определения
возможностей браузера.
6. if (isNS) {...}
Теперь вы можете использовать пере-
менные, которые были заданы в пунк-
тах 1,2 и 3 для определенного браузера
и версии.
® Конечно, количество браузеров не ограни-
чивается двумя. Но большинство браузе-
ров определяются как Netscape или Internet
Explorer е зависимости от того, с каким из
них они совместимы 8 большей степени.
Так происходит с браузером Opera. Он не
исключается, хотя Web-сайты, способные
определять тип браузера, можно просмат-
ривать только в конкретных браузерах.
12521 Среда, в которой вы работаете
Адрес и название
страницы
URL Web-страницы представляет собой
ее уникальный адрес в Web. Название -
это обозначение, которое вы присваивае-
те странице и которое находится внутри
тега <title> в заголовке документа. Эту
информацию можно легко отобразить на
Web-странице (рис. 11.6).
Определение адреса и названия
страницы
1. var pageURI=self.location: 1
В сценарий JavaScript добавьте перемен-
ную pageURI и присвойте ей значение
self, location, которое является адресом
вашей Web-страницы (листинг 11.3).
2. var pageTitle=document.title;
В код JavaScript добавьте переменную
pageTitle и присвойте ей значение
document.title, которое является на-
званием вашего документа, то есть
содержимым тега <title>.
Теперь эти переменные можно использо-
вать для различных целей. В частности, на-
писать их на странице, как в данном приме-
ре. Адрес страницы применяется как обрат-
ная ссылка.
_в_О 6_____0НГМ1 4 CSS for th« WWW | ЯмЯлд Раде location and Tuie Q
< *1 ej
The location of the page titled DHTML & CSS for the WWW |
Finding Page Location and Title is:
http://www.webbedenv1ronments.com/dhtml/3rdEdition/1l_Leam
4'2
Рис. 11.6. Название страницы и ее URL
Листинг 11.3. Переменные pageURI и pageTitle
определяются и затем отображаются на странице.
URI также используется для создания ссылки
на нее. Ссылка срабатывает, когда пользователь
щелкает мышью по названию
899 .^ЛИСТИНГ , , —oj
<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.writein(pageURI);
</script>
</body>
</html>
I l При создании версии страницы для печати
(j I добавление URL оригинальной ссылки вни-
1----1 зу позволяет гарантировать, что пользова-
тель сможет найти оригинальный источник.
Рис.11.7. Размеры экрана в Windows.
В действительную область включено все, кроме
панели задач. В Windows панель может появляться
нн любой стороне экрана по желанию пользователя
;Рис. 11.8. Размеры экрана в Мас. В действительную
область включено все, кроме верхней полосы
меню; длины правой и левой сторон этой области
приблизительно равны шести пикселям. В ОС Мас
полоса меню всегда располагается сверху
___________________Размеры экрана |253|
Размеры экрана
Удивительный мир Internet возникает
именно на экране компьютера. Можно
попытаться создать сайт с помощью азбу-
ки Морзе, перфокарт или других устарев-
ших методов, но, поверьте, электронно-
лучевая трубка лучше подходит для ото-
бражения Web-сайтов (рис. 11.7 и 11.8).
К сожалению, невозможно заранее узнать
размер области, в которой будет отобра-
жаться страница, и сколько места на са-
мом деле будет доступно.
Чтобы определить, с каким пространством
вы работаете, вы можете с помощью объек-
тов screen, width и screen, height получить
информацию об общих размерах экрана.
Чтобы определить, какое именно простран-
ство на экране, в меню и других элементах
интерфейса учитывается (листинг 11.4), ис-
пользуйте объекты screen.availHeight и
screen.availwidth.
Поэтому лучше определить размер экра-
на заранее (рис. 11.9).
; SOO 8HTW.«CSSfor>l№WWWiriMi4»h« fer»««ainen>lOT» - СЭ
; 4i. .♦ я ш 4: *>
i Your total screen height is 768px
j Your total screen width is 1152px
Your live screen height is 746px
Your live screen width is 1148px
Рис. 11.9. Код отображает полные размеры экрана
и размеры действительной области
моего компьютера
12541 Среда, в которой вы работаете
Определение размеров экрана
1. var scruC’nHeioht=screen.height;
Создайте переменные screenHeight
и scrcenWidth на JavaScript и при-
свойте им значения screen, height и
screen width соответственно. В этих
переменных будет храниться полная
высота и ширина экрана в пикселях
(листинг 11.4).
2. var liveScm n
->Hei<:;hL-scri'en. availHeight;
В сценарий JavaScript добавьте перемен-
ные livuScreeriHeight и liveScrecnWidth
и присвой re им значения screen, avail-
Height и screen.availWidth соответ-
ственно. В этих переменных будет хра-
ниться действительная (доступная) вы-
сота и ширина экрана в пикселях. По-
следние отличаются от полной высоты
и ширины гем, что в них входит только
область, где отображается окно, н не
включаются полосы меню, которые до-
бавляются операционной системой.
Листинг 11.4. Определяются и полные,
и действительные размеры окна; эти значения
присваиваются переменным, с помощью которых
они выводятся на экран
000 .. .. ЛИСТИНГ,;,;;,.... ;,-р|
<’DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1 0 Transitional//EN" "http://www.w3.org/
->TR/xhtml1/DT0/xhtral1-transitional.dtd">
<html xmlns="http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type"
->content=,,text/html; charset=utf-B" />
<title>DHTML & CSS for the WWW |
->Finding the Screen Dimensions</title>
</head>
<body>
<script language="JavaScript”
->type="text/gavascript’,><1 -
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 <brxbr>');
document.writeln('Your live screen height
->is ‘+ liveScreenHeight + ‘px <br><br>');
document.writeln('Your live screen width
->is '+ liveScreenWidth + ‘px <br><br>');
// ->
</scnpt>
</body>
</html>
Размеры экрана 12551
Какой размер экрана лучше использовать?
Стандартное разрешение экрана, на которое ориентируются Web-дизайнеры, - 800x600.
Но все сайты должны поддерживать размер 640x480, даже если в этом случае понадо-
бится горизонтальная полоса прокрутки. Хотя данный размер используется менее чем
13% посетителей Web-сайтов и по сообщениям StatMarket (vvww.statmarket.com) эта
цифра уменьшае1ся, нужно, чтобы любой сайт можно было просматривать и на ма-
леньких экранах.
Значимую информацию и элементы дизайна следует размещать так, чтобы их
было видно без вертикальной прокрутки. Важные элементы пользовательского ин-
терфейса должны отображаться на экране 800x600 без горизонтальной прокрутки.
Как и всегда при работе с дизайном, вам следует помнить о вашей потенциальной
аудитории. Всегда старайтесь узнать, какой примерно средний размер монитора у тех
пользователей, которые будут посещать ваш Web-сайт. Хотя очень полезно знать, ка-
кой средний размер экрана используется Web-браузерами, может случиться так, что
^большая часть посетителей вашего сайта увидят его в меньшем по размерам экране.
12561 Среда, в которой вы работаете
Количество цветов
Раньше цвет был тем свойством, которое
дизайнер использовал с крайней осторож-
ностью. Все компьютеры по-разному вос-
производят цвета. На профессиональном
компьютере вы создадите прекрасную
Web-страницу, разноцветную, с отбрасы-
ваемыми тенями, со сглаженным шриф-
том и трехмерными кнопками (рис. 11.10).
Но на компьютерах большинства посети-
телей эта страница будет выглядеть как
цветная фотография, которую оставили на
солнце (рис. 11.11).
Проблема заключается в том, что некото-
рые компьютеры поддерживают миллио-
ны цветов, в то время как другие - лишь
несколько тысяч, сотен или даже меньше.
Таким образом, полезно иметь представ-
ление о том, сколько цветов есть на ком-
пьютере человека, который просматри-
вает ваш сайт. Однако в последние годы
с появлением новых машин и исчезнове-
нием многих старых эта проблема стала
не столь насущной.
Однако старые машины все же используют-
ся, и нужно учитывать ограничения, кото-
рые появляются в связи с этим (рис. 11.12
и 11.13).
Рис. 11.10. Изображение на основе 32-битной
палитры
рис. 11.11. То же изображение в 8-битной графике.
Исчезли плавные переходы между цветами
> <"» •:» к W .** *; ...............
Your screen is currently using 32bit colour.
Рис. 11.12. Код отображает цветовой диапазон
монитора, в данном случае 32-битный
Количество цветов ] 2571
Рис. 11.13. Код отображает цветовой диапазон
монитора, в данном случае 8-битный
Листинг 11.5. Функция findColors возвращает
одно из значений, перечисленных в табл. 11.1,
взависимости от количества доступных цветов
на компьютере пользователя
<html>
<body>
<scгipt>
function findColors() {
return (screen.colorDepth);
}
document write('Your screen is currently
->using ' + findColors() + 'bit color.');
</script>
</body>
</html>
Определение количества цветов
1. screen.colorDepth
Значение, определяющее количество
цветов на компьютере пользователя,
содержится в свойстве colorDepth объ-
екта screen (листинг 11.5). В результа-
те работы этого кода возвращается
значение глубины цвета - количество
бит на пискель (табл. 11.1).
I _ I В последние несколько лет старые компью-
(j теры выходили из строя, а новые машины
'---1 появлялись на рынке, и проблема цвета бы-
стро перестала быть актуальной.
Таблица 11.1. Значения свойства colorDepth
Количество битов Количество цветов
4 16
8 256
16 65536
32 16,7 млн
9 Тиге Дж К
12561 Среда, в которой вы работаете
Размеры окна браузера
В Netscape можно определить текущую
высоту и ширину браузера (данный код
ие работает в Internet Explorer). Это пол-
ная ширина и высота окна браузера в пик-
селях, включая все элементы управления
в видимой области (рис. 11.14).
ООО DHTML & CSS for the WWW | Firstling the Browser Dimer О
> :• (Д> 'Л Л e
Your total browser height is 234px
Your total browser width is 467px
URI или URL?
Рис. 11.14. Код отображает размеры окна браузера
в Netscape
Для хранения информации о место-
положении страницы применялась
переменная pageURI, а не pageURL. URL
расшифровывается как Universal Re-
source Locator, a URI - как Universal
Resource Identifier. Чем же они отли-
чаются? В действительности, немно-
гим. Но W3C по каким-то причинам
решил, что URL, используемый чаще,
представляет собой особый термин,
и вместо него было решено приме-
нять URL Замечу, что это абсолютно
ни на что не влияет.
Но стоит ли включать URI вместо URL?
Только если вы хотите запутать своих
друзей и поразить врагов.
г
Размеры окна браузера [25б]
1 Листинг 11.6. Функции f indBrowserHeight
и f indB rouse г Wid t h возвращают размеры окна
браузера в пикселах
<head>
<script>
function findBrowserHeight() {
if (window outerHeight != null)
return window.outerHeight:
return null;
}
function findBrowserWidthO {
if (window.outerWidth ’= null)
return window.outerWidth;
return null,
}
</script>
</head>
<Dody>
<script>
browserHeight = findBrowserHeight();
browserwidth = findBrowserWidth ();
if (browserHeight! =null)
->{document.writeln('your total browser
->height is ' + browserHeight + 'px
-><brxbr>); }
else {document.wnteln( 'The browser
->window\ s height can not be
^determined. <br><br>’); }
if (browserWidth1 =null) {
document writeln('your total browser
->width is ' + browserwidth + 'px
-><br><br>); }
else {document. wnteln( ’ The browser
->window\'s width can not be
^determined.'); }
</script>
</body>
</html>
Выяснение размеров окна
браузера
1. window.outerHeight
Создайте функцию, которая возвраща-
ет внешнюю высоту окна. Это значение
измеряется в пикселях (листинг 11.6).
2. window.outerWidth
Создайте функцию, которая возвраща-
ет внешнюю ширину окна. Данное зна-
чение также измеряется в пикселях.
®В Internet Explorer нельзя определить об-
щие размеры окна браузера.
I л I Вы можете определить рабочую область в
(j окне браузера как в Internet Explorer, так и
’----1 в Netscape.
260 Среда, в которой вы работаете
Размеры клиентской
области окна
Информация о размерах клиентской об-
ласти окна, в которой будет отображать-
ся страница (рис. 11.15), гораздо полез-
ней, чем сведения о размерах окна брау-
зера (см. предыдущий раздел).
Определение размеров
клиентской области
1. functiin г 1 rial ivcPagcHeight()
В сценарии JavaScript добавьте функцию
findLivePagcHcught, использующую ме-
тод определения возможностей браузе-
ра. Таким образом указывается, как бра-
узер определяет высоту клиентской об-
ласти окна, функция возвращает это
значение. В Netscape используется значе-
ние window innerHeight, а в Internet
Explorer - document.body.clientHeight
(листиш 11.7}.
Рис. 11.15. После щелчка по картинке появляется
сообщение, в котором указаны размеры
клиентской области окна браузера
Листинг 11.7. Функции findLivePageHeightC)
и findLivePageWidth() возвращают размеры
клиентской области окна браузера
<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:
}
</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>
Размеры клиентской области окна 12611
2. function findLivePageWidth() {...}
В сценарий JavaScript добавьте функ-
цию findLivePageWidth, использую-
щую метод определения возможностей
браузера. В ней выясняется, как браузер
хранит ширину клиентской области ок-
на, и функция возвращает это значение.
В Netscape ширина клиентской области
окна браузера находится в свойстве
window, innerwidth, а в Internet Explorer -
в document.body.clientwidth.
3. function pageDim() {...}
Добавьте функцию, которая вызывает
функции findLivePageHeight() и find
LivePageWidth (). В этом случае мы про-
сто используем функции, чтобы отоб-
разить предупреждение для текущих
размеров.
4. onload=”pageDim()”
Добавь1е триггер для активации функ-
ции pageDim() из пункта 3.
Г^”1 Если вы создаете страницу, содержание ко-
Q торой зависит от рабочей области, вы може-
।--* те вынудить страницу перегружаться при из-
менении размеров окна браузера. Для этого
поместите следующий код в тег <body>:
onresize=”self. location. reloadO”.
I _ ( Netscape 6+ также может использовать
(j объекты window.innerHeight и window.
।--* innerwidth для определения размеров рабо-
чей страницы. Поскольку Internet Explorer
поддерживает только объекты client Width
и clientHeight, мы рекомендуем вам ис-
пользовать именно их.
12621 Среда, в которой вы работаете
Положение прокрутки
страницы
CSS-познционирование основано на сме-
щении объекта от верхнего левого угла
страницы во время ее загрузки. Прн про-
крутке страницы ее начало (левый верх-
ний угол) перемещается вместе с содержи-
мым страницы. К счастью, у браузера мож-
но узнать, насколько была передвинута
страница, то есть определить положение
прокрутки (scrolling position) - рис. 11.16.
Определение положения прокрутки
1. function findScrollLeftO {...}
В сценарий JavaScript добавьте функ-
цию findScrollLeftO, использую-
щую метод определения возможнос-
тей браузера - как браузер выясняет
положение прокрутки по горизонта-
ли. В Netscape применяется значение
window. pageXOffset, а в Internet Explorer-
document. body. scrollLeft (листинг 11.8).
2. function findScrollTopO
В сценарий JavaScript добавьте функ-
цию findScrollTopO, использующую
метод определения возможностей брау-
зера - как браузер выясняет положение
прокрутки по вертикали. В Netscape
применяется значение window. pageYOf f
set, а в Internet Explorer - document,
body. scrollTop.
Рис.11.1Б. Предупреждение указывает, на сколько
пикселов переместилась страница
Е Netscape 4 (Wiindows) и Netscape 6 (все ОС)
ведут себя непонятным образом, когда
прокрутке фрейма присвоено значение по.
Полоса прокрутки исчезает, при этом весь
фрейм также нельзя прокручивать, даже
если используется показанный выше код
JavaScript.
Netscape 7 исправил эту ошибку.
| _ | Netscape также может использовать обьекты
window. pageXOffset и window.pageYOffset
।‘ для определения положения скроллинга.
Internet Explorer поддерживает только ме-
тодики scrollLeft и scrollTop, поэтому
предпочитают использовать именно их.
Положение прокрутки страницы |263|
Листинг 11.8. Функции f indScrollLeft() и findScrollTopO определяют положение прокрутки
страницы. Такие функции применяют в Web-странице по-разному: непосредственно отобразить
результат работы функции (как в данном примере) или присвоить эти значения переменным, которые
можно будет использовать и изменять в дальнейшем
...................................................................
<html>
<head>
<script>
function findScrollLeftO {
if (window.pageXOffset != null)
return window.pageXOffset;
if (document.body.scrollHeight != null) '
return document.body.scrollLeft;
return (null);
}
function findScrollTopO (
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: '+ findScrollTopO + 'px; Scrolled
->From Left: ' + findScrollLeftO + ’px’);’*>
<img scr="alicel6.gif" width="640'' height="477'’ border=”0">
</a>
</body>
</html>
ИНФОРМАЦИЯ
12
В главе 10 мы рассказали о том, как преоб-
разовать элемент (определенный с помо-
щью HTML-тегов) в объект, к которому
затем может обращаться объектная модель
документа. С помощью DOM вы можете
получить информацию об объекте, напри-
мер, узнать его размеры, где он находится,
а также виден он на экране нли нет.
Вся информация, собранная о среде в пре-
дыдущей главе, была получена посред-
ством вопросов, обращенных к браузеру
(его тип и размер экрана). В этой главе мы
узнаем, какую информацию можно полу-
чить, запрашивая объекты в окне браузе-
ра о них самих.
Как определить, по какому объекту щелкнул пользователь 12651
Рис. 12.1. Выберите любую Алису
Как определить, по какому
объекту щелкнул
пользователь
В главе 10 мы рассказали вам о том, как
использовать команду evt, чтобы найти
объект, к которому относится событие.
С помощью DHTML вы также можете оп-
ределить ID объекта, в котором произош-
ло событие (рис. 12.1). При работе в Internet
Explorer это потребует вызова объекта
srcElement; при работе в Netscape вам при-
дется использовать объект target (лис-
тинг 12.1).
Листинг 12.1. Функция findObjectlOO идентифицирует объект, который вызвал событие. Для этого
будет использован объект evt, который передается событию
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/
->DTD/xhtmH-transitional.dtd">
<ht(nl xmlnss"http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv-”content-type” content=”text/html;charset=utf-8” />
<title>OHTML &, CSS for the WWW | Detecting Which Object Was Clicked</title>
<script language^'JavaScript" type=”text/javascript"><' -
function findObjectlO(evt) {
var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
if (objectIO)
alert(‘You clicked ‘ + objectID +
return;
11 ->
</script>
<style type=,'text/css'' media=''screen’’><!-
#alice1 {
visibility: visible;
position: absolute;
top: 5px;
left: 5px
12661 Информация об объекте
Определение элемента, в котором
произошло событие
1. function findObjectID(evt) {...}
Добавьте функцию f indObj ectID() в
JavaScript вверху документа. Этот
скрипт определяет на экране элемент
CSS, в котором произошло событие, а
затем отображает сообщение о том, ка-
кой элемент это был. Для этого нам
понадобится адаптировать событие
для поиска цели (Netscape) нли эле-
мента-источника (Internet Explorer) со-
бытия. Затем событие можно исполь-
зовать для поиска ID объекта:
var objectID = (evt.target) ?
->evt.target.id : ((evt.srcElement) ?
->evt.srcElement.d : null);
2. #alicei
Настройте элементы CSS, используя те
параметры стиля, которые вы считаете
нужными. В этом примере мы настро-
или три изображения {alicel, alice2
и alice3), причем каждое имеет уни-
кальный ID.
3. onclick=”findDbjectID(event)”
Добавьте триггер для активации функ-
ции, которую вы создали в пункте 1,
и передайте его объекту event.
После того как вы определите ID объекта с
помощью переменной evt, вы можете ис-
пользовать его для адресации объекта и вне-
сения изменений в его параметры.
Листинг 12.1 (окончание)
ВОЙ . .... . Листинг 1,-1 о]
#alice2 {
visibility: visible;
position: absolute;
top: 150рх;
left: 200px;
}
#alice3 {
visibility: visible;
position: absolute;
top: 5px;
left: ЗООрх;
}
-></style>
</head>
<body> 4
<img id="alice1" onclick="findDbjectID
-> (event)'' src="alice04.gif" height=”448"
->width="30l" border="0” />
-ximg id="alice2" onclick="findObjectID
-> (event)" src="alice22.gif" height="482"
->width="329" border="0" /> <img id=
->”alice3" onclick=”findObjectID(event)"
->src="alice30.gif" height="480”
->width="353" border="0” />
</body>
</html>
Рис. 12.2. В предупреждении указаны размеры
объекта. В данном случае внутри объекта
находится изображение
Листинг 122. Функции findWidth() и findHeightQ
определяют размеры отдельного объекта
на странице. Их можно применять в Web-странице
по-разному: непосредственно отобразить результат
работы функции (как в данном примере) или
присвоить эти значения переменным, которые
можно будет использовать и изменять
в дальнейшем
ЛИСТИНГ.
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.О
->Transitional//EM’' "http:/www. w3. org/TR
->xhtmli/DTD/xhtmll-transitional.dtd"><html
->xmlns="http.//www.w3.org/l999/xhtml”>
<head>
<meta http-equiv='’content-type”
->content=”text/html;charset=utf-B" />
<title>DHTML & CSS for the WWW |
Finding an Object’s Width and
->Height</title>
<script type="text/javascnpt”
->language=',javascript,‘><! -
function findWidth(objectlD) (
var object = document.getElementByld
->(objectID),
if (object.offsetwidth)
return object.offsetwidth;
return (null);}
function findHeight(objectlD) {
var object = document,getElementByld
->(objectID);
if (object.offsetHeight)
return object.offsetHeight;
Размеры объекта 1267
Размеры объекта
Информацию о среде, описываемую ра-
нее в этой главе, например размер экрана,
мы узнавали от браузера, задавая ему воп-
росы. Далее мы будем получать сведения
от самих объектов, находящихся в окне
браузера, задавая вопросы им. Чтобы вы-
яснить размеры объекта, его положение,
видимость, ЗВ-познцию, нужно восполь-
зоваться общей D0M.
У каждого объекта есть ширина и высота,
которые и определяют его размеры (см. раз-
дел «Что такое элемент» в главе 5). Если раз-
меры объекта известны (рис. 12.2), то его
легко перемещать и позиционировать та-
ким образом, чтобы он не выходил за края
экрана. Это особенно важно прн создании
полосы прокрутки.
Выяснение ширины и высоты
объекта
1. function findWidth(objectID) {...}
В сценарий JavaScript добавьте функцию
findWidth() (листинг 12.2). При обра-
щении к объекту она задействует его ID,
который передается в функцию как пе-
ременная objectID. Таким образом со-
здается DOM. Затем в этой функции
применяется метод определения воз-
можностей браузера. Так можно уста-
новить, как браузер выясняет ширину
объекта. В Netscape 4 используется зна-
чение clip, width, а в Netscape би Internet
Explorer 4/5/6 - offsetwidth.
2. function findHeight(objectlD) {...)
В сценарий JavaScript добавьте функ-
цию findHeight(). Она задействует
ID объекта, к которому обращается.
ID передается в функцию как перемен-
ная objectID.
12681 Информация об объекте
Таким образом создается DOM. Затем в
этой функции применяется метод оп-
ределения возможностей браузера. Так
устанавливается, как браузер выясняет
высоту объекта. В Netscape 4 использу-
ется значение clip, height, а в Netscape 6
и Internet Explorer 4/5/6 - of fsetHeight.
3. tfobjectl {. }
С помощью значений position, left и
top установите ID объектов.
4. function showDim(objectlD)
Добавьте функцию JavaScript, в которой
используются функции, определенные
на шаге 2 и 3. В этом примере функция
showDim() просто присваивает значения,
возвращаемые функциями f indWidth ()
и f ingHeight (), переменным и затем отоб-
ражает их значения в предупреждении.
5. onClick='snowDim(’object1')"
Чтобы запустить функцию, созданную
на шаге 4, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому хотите обратиться.
Е Протестировав этот код на разных браузе-
рах, вы заметите, что размеры объекта в них
немного отличаются. Зто происходит из-за
того, что в одних браузерах (например, In-
ternet Explorer) учитывается ширина и высо-
та элемента вместе с границей, а в других
(Netscape 4) граница не включается.
ЕЕсли вы знаете размеры объекта, то смо-
жете переместить его таким образом, что-
бы он не ушел с экрана вправо или вниз,
особенно при создании полос прокрутки.
Листинг 12.2 (окончание)
return (null);
}
п ->
</script>
<style type=”text/css" media="screen"><1-
#object1 (
visibility: visible;
position: absolute;
top: 50px;
left: lOOpx;
width: 402px;
border: solid 2px gray; i
}
-></style>
</head>
<body>
<scnpt language-'JavaScript"
->type="text/javascript">
function showDim(objectlD) {
widthObj - findWidth(obgectlD);
heightObj = findHeight(objectlD),
alertC Width: ' + widthObj + J
-> ‘px; Height: ‘ + heightObj + :
-> 'px' );
}
</script>
Click me to find my Width and Height! <br />
<br />
<div id=’’object1" onclick="showDim
-> (‘object!* )”>
<img src="alice20.gif" alt="alice” .
->height="4B0" width="39B" border="0"
->/></div>
</body>
</html>
Определение положения объекта 12691
Рис. 12.3. В предупреждении указаны левая
и верхняя позиции объекта
Листинг 12.3. Функции findLeft()
и findTop () определяют положение отдельного
объекта на странице. Их можно применять в Web-
странице по-разному: непосредственно
отобразить результат работы функции (как в
данном примере} или присвоить эти значения
переменным, которые можно будет использовать
и изменять в дальнейшем
Определение положения
объекта
Верхнее и левое положение элемента мож-
но установить с помощью CSS. Затем, что-
бы определить эту позицию, можно ис-
пользовать JavaScript (листинг 12.3).
В основном DHTML используется для пере-
мещения объектов на странице (см. раздел
«Перемещение объекта на заданное рас-
стояние» в главе 14). Но прежде чем пере-
двинуть объект, необходимо выяснить его
текущее положение (рис. 12.3).
Листинг.
CDOCTYPE html PUBLIC “-//W3C//0TD XHTML
->1.0 Transitional//EN’' ‘‘http://www.w3.org/
->TR/xhtmli/DTD/xhtml1-transitional.dtd">
<html xmlns=’’http: //www.w3.org/1999/xhtmr’>
<head>
cmeta http-equiv="content-type"
->con tent=’’text/html; charset=utf-8" />
<title>DHTML & CSS for the WWW |
->Finding an Object’s Left and Top
->Position</title>
<script language=”JavaScript"
->type='‘text/javascript”><' -
function findLeft(objectlO) {
var object = document.getElementByld
-> (objectID):
if (object offsetLeft)
return object.offsetLeft;
return (null);
}
function findTop(objectlD) {
var object = document.getElementByld
->(objectID);
if (object offsetTop)
12701 Информация об объекте
Определение положения top и left
для объекта
Чтобы настроить положение верхнего ле-
вого угла объекта, вы используете пара-
метры top и left CSS. Вы можете предпо-
ложить, что для определения этих значе-
ний в JavaScript вы тоже будете применять
эти параметры стиля. Однако для этой
цели и Netscape, и Internet Explorer приме-
няют объекты off set Left и offsetTop (лис-
тинг 12.3 и рис. 12.3).
1. function findLeft(objectID) {...}
В JavaScript следует добавить функцию
f indLef t (). При обращении к объекту
она задействует его ID, который пе-
редается в функцию как переменная
objectID. Таким образом создается
DOM. В этой функции применяется ме-
тод определения возможностей браузе-
ра. Так устанавливается, как браузер вы-
ясняет левое положение объекта. Затем
функция возвращает это значение.
В Netscape 4 используется значение left,
а в Netscape 6 и Internet Explorer 4/5/6 -
offsetLeft и pixelLeft соответственно.
2. function findTop(objectlD) {...)
В сценарий JavaScript добавьте функцию
findTopQ. Она задействует ID объекта, к
которому обращается. ID передается
в функцию как переменная obj ectID. Та-
ким образом создается DOM. В этой
функции применяется метод опре-
деления возможностей браузера. Так
устанавливается, как браузер выясняет
верхнее положение объекта. Затем фун-
кция возвращает это значение. В Net-
scape 4 используется значение top, а в
Netscape 6 и Internet Explorer 4/5/6 -
offsetTop и pixelTop соответственно.
Листинг 12.3 (окончание)
return object.offsetTop;
return (null):
}
11 ->
</script>
<style type=”text/css” media-'screen"><!-
#object1 {
visibility: visible;
position: absolute;
top: 50px;
left: ЮОрх;
width: 410рх;
border: solid 2px gray;
1
-></style>
</head>
<body>
<script language='’JavaScript"
->type="text/javascript">
function showPos(objectlD) {
if (objectID) (
leftPos = findLeft(objectID);
topPos = findTop(objectlD);
alert(*Left: ' + leftPos +'px;
->Top: ' + topPos + ‘px’ );
}
)
</script>
Click me to find my Left and Top Position
->on the screen!<br />
<br />
<div id=”objectl" onclick="$howPos
-> ('objectr )">
<img src="alice20.gif" height="480"
->width='’398" border="0" />
</div>
</body>
</html>
г
Определение положения объекта |271~|
3. #object1 {...}
Создайте ID правило и опишите в нем
положение объекта с помощью свойств
position, left н top.
4. function showPos(objectlD) {..J
Создайте функцию JavaScript, в которой
используются функции, определенные
на шаге 2 и 3. В этом примере функция
showPos() просто присваивает значения,
возвращаемые функциями f indLeft () и
findTop(), переменным и затем отоб-
ражает эти значения в предупреждении.
5. onClick=‘‘showPos(‘object!')"
Чтобы запустить функцию, созданную
на шаге 4, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому хотите обратиться.
Г^1 Используя Internet Explorer 4+, вы можете с
помощью объектов pixelLeft и pixelTop
।‘ определить положение top и left. Посколь-
ку объекты offsetLeft и offsetTop рабо-
тают как в Netscape, так и в Internet Explorer,
предпочитают использовать именно их.
I I Вы можете заметить небольшое несоответ-
U ствие между положением объекта в Internet
।’ Explorer и Netscape 4 и положением объекта
в Netscape 6. В последнем случае положе-
ние задается по отношению к внутренней
стороне рамки объекта, другие же браузеры
определяют положение объекта по отноше-
нию к внешней стороне рамки. Это приво-
дит к несоответствию примерно в 4 пиксе-
ля. Вы можете решить эту проблему, доба-
вив стили, которые поставляются вместе с
браузером.
2721 Информация об объекте
Правая и нижняя позиции объекта
С помощью JavaScript можно определить
также правое и нижнее положение объек-
та (рис. 12.4). Однако этого нельзя добить-
ся за один шаг. Сначала находится левое и
верхнее положение элемента, его ширина
и высота, зачем соответствующие величи-
ны складываются (листинг 12.4).
1. function ftndRight(objectID) {...}
В сценарий JavaScript добавьте функ-
цию f tndRight (). При обращении
к объекту она задействует его ID, кото-
рый передается в функцию как перемен-
ная objectID. Таким образом создается
DOM. В данной функции применяется
метод определения возможностей брау-
зера. Это позволяет установить, как
браузер выясняет левое положение
объекта и его ширину. Затем функция
возвращает сумму указанных величин
(см. раздел «Размеры объекта»).
2. function findBottom(objectlD) {...}
В сценарий JavaScript добавьте функ-
цию findBottomf). Она задействует ID
объекта, к которому обращается. ID
передается в функцию как переменная
objectID. Таким образом создается
DOM. В этой функции применяется
метод определения возможностей брау-
зера. Устанавливается, как браузер выяс-
няет верхнее положение объекта и его
высоту. Затем функция возвращает
сумму этих значений.
Рис. 12.4. В предупреждении указаны нижняя
и правая позиции объекта
Листинг 12.4.Функции findRightO
и findBottom() определяют положение
отдельного объекта на странице. Их можно
применять в Web-странице по-разному:
непосредственно отобразить результат работы
функции (как в данном примере} или присвоить
эти значения переменным, которые можно будет
использовать и изменять в дальнейшем
j~?С.'ЛИСТИНГ!''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN" “http://www.w3.org
->TR/xhtml1/DTD/xhtmll-transitional.dtd”>
<html xmlns="http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type’'
->content="text/html; charset-utf-8'' />
<title>DHTML & CSS for the WWW |
->Ftnding an Dbject’s Right and
->Bottom Position</title>
<script language-’’JavaScript”
->type=”text/javascript’’><! -
function findRight(objectlO) (
var object = document.getElementByld
-> (objectID):
if (object.offsetLeft) {
return (object.offsetLeft +
->object.offsetwidth);
}
return (null);
} i
function findBottom(objectlD) ( :
Определение положения объекта 1273 ]
Листинг 12.4 (окончание)
var object = document.getElementByld
-> (objectID);
if (object.offsetTop) {
return (object.offsetTop +• object.
->offsetHeight);
}
return (null);
)
// ->
</script>
<style tybe='’text/css" media=”screen”><!-
«object! {
visibility visible;
position, absolute;
top: 50px,
left: ЮОрх;
width: 4Юрх;
border- solid 2px gray;
}
-></style>
</head>
<body>
<scnpt language-’JavaScript”
->type="text/javascript">
function showPos(objectlD) (
rightPos - findRight(objectlD);
bottomPos = findBottom(objectlD);
alert(‘ Right: ‘ + rightpos +
-> 'px; Bottom: ' + bottomPos +
-> ’px’ );
}
</script>
Click me to find my Right and Bottom
^positions on the screen! <br />
<0r />
<div id-"object1" onclick=”showPos
-> (’object!1 )">
<img src="alice2D. gif” alt="alice”
->height=”48O” width=”398” border-’O”
->/></div>
</body>
</html>
3. ttobjectl {...}
С помощью значений position, left и
top установите ID объектов.
4. function showPos(objectlD) {...}
Создайте функцию JavaScript, в кото-
рой используются функции, опреде-
ленные на шаге 2 и 3. В этом примере
функция showPos() просто присваива-
ет значения, возвращаемые функция-
ми findRight() и findBottom(), пере-
менным и затем отображает эти значе-
ния в предупреждении.
5. onClick=”showPos( ’object! ’)’’
Чтобы запустить функцию, созданную
на шаге 4, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому хотите обратиться.
I __ ] Вы можете заметить небольшое несоответ-
Г| ствие между найденными значениями
——1 в Internet Explorer и Netscape 4 и аналогич-
ными величинами Netscape 6. В последнем
случае положение объекта задается по отно-
шению к внутренней стороне рамки объекта,
другие же браузеры определяют эти значения
по отношению к внешней стороне рамки.
12741 Информация об объекте
Поиск трехмерного
положения объекта
CSS-атрибут z-index позволяет размещать
позиционированные элементы в порядке
стека в 3D (см. раздел «Элементы в порядке
стека (ЗЭ-позиционирование)» в главе 6).
С помощью JavaScript можно определить
z-индекс отдельного объекта на экране
(рис. 12.5).
Однако если z-индекс не установлен дина-
мически, Internet Explorer 4/5/6 и Netscape 6
его не распознают. Чтобы избежать этой
ошибки, для определения z-индекса объек-
та при первой загрузке страницы приходит-
ся использовать JavaScript (листинг 12.5).
Определение z-индекса объекта
1. function initPageO (...)
Добавьте функцию initPage() в ваш
JavaScript. Эта функция задает началь-
ный z-индекс объектов при первой заг-
рузке страницы.
2. function findLayer(objectlD) (...)
В код JavaScript добавьте функцию
findl_ayer(). Она применяет ID объекта,
к которому обращается. ID передается
в функцию как переменная objectID.
Таким образом создается DOM. Затем
функция использует ID для доступа к
свойству z-index и возвращает это зна-
чение.
3. #object1
Создайте ID правило и опишите по-
ложение объекта с помощью свойств
position, type и z-index.
4. onLoad="...
Чтобы инициализировать z-индекс нуж-
ных объектов, используйте в теге <body>
функцию setLayer().
Рис. 12.5. В предупреждении указан номер слоя,
на котором находится объект
5. function whichLaye г(objectID) (...)
Создайте функцию JavaScript, в кото-
рой применяются функции, опреде-
ленные на шаге 2 и 3. В этом примере
функция whichLayer() просто присва-
ивает значения, возвращаемые функ-
цией findLayer(), переменным и затем
отображает их значения в предупреж-
дении.
6. onClick="whichLayer('objectl')"
Чтобы запустить функцию, созданную
на шаге 5, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому хотите обратиться.
Е Альтернативный (но не менее сложный) ме-
тод определения z-индекса любого объекта
без предварительной устаноеки значения с
помощью JavaScript представлен в разделе
«Определение значения собственности для
стиля» в главе 16.
Поиск трехмерного положения объекта 12751
Листинг 12.5. Функция findLayer() определяет
z-индекс отдельного объекта на странице
.... ..л. ЛИСТИНГ.--* - , О|
<! DDCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN" '‘http://ww.w3.org/TR
->xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=” http://ww.w3.org/l999/xhtmr’>
<head>
<meta http-equiv="content-type"
->content=“text/html; charset=utf-B” />
<title>DHTML & CSS for the WWW )
->Finding the Z Position</title>
<script language="JavaScript'' type=”text
->javascript”><!-
function initPageO {
for (1=1; i<=4; i++) {
var object = document.getElementByld
->('object’ + i);
object, style.zlndex = i;
}
}
function findLayer(objectlD) {
var object = document.getElementByld
->(objectID);
if (object.style.zlndex)
return object.style.zlndex;
return (null);
}
// ->
</SCript>
<style type-’text/css" media=,,screen”><!-
#objectl (
position: absolute;
z-index: 3;
top: 175px;
left: 255px;
}
#object2 {
position: absolute;
z-index: 2;
top: ЮОрх;
left: 170px;
}
#object3 {
position: absolute;
z-index: 1;
top: 65px;
Листинг 12.5 (окончание)
Листинг
left: 85px;
}
#object4 {
position: absolute;
z-index: 0;
top: 5px;
left: 5px;
}
-></style>
</nead>
<body onload=”initPage();”>
<script language="JavaScript”
->type="text/javascrjpt”>
function whichLayer(objectlD) {
layerNum = findLayer(objectlD);
alert(’Layer: ‘ + layerNum );
</script>
<div id="object1” onclicks”whichLayer
-> ('objectl’)”>
<img src="alice22.gif” height=”147"
->width=”lOO” border=”0”
->alt=”alice 1” /><br />
</div>
<div id=”object2” onclick=’’whichLayer
-> (’objects’)”>
<img src-’alice32.gif" height=”201”
->width=”i4D" border=”0" alt=
->”alice 2” /><br />
</div>
<div id="object3” onclick="whichLayer
-> ('objects’)”>
<img src=''alicei5.gif" height=”l9B”
->width="l5D” border=”0”
->alt=”alice 3” /xbr />
</div>
<div id="object4" onclick=”whichLayer
-> (’objects )”>
<img src="alice29.gif” height-"236”
->width=”2DD" border="D”
->alt=”alice 4” /><br />
</div>
</body>
</html>
12761 Информация об объекте
Состояние видимости
объекта
У всех элементов с установленным поло-
жением есть также состояние видимости -
hidden или visible (см. раздел «Определе-
ние видимости элемента» в главе 7). По
умолчанию это состояние указывается как
visible (рис. 12.6), но его можно поменять
с помощью JavaScript.
К сожалению, в Netscape 6 и Internet Explo-
rer 4/5/6 нельзя получить доступ к состоя-
нию видимости, которое изначально уста-
новлено в CSS. Это можно сделать, только
если состояние определено динамически
(листинг 12.6).
Выяснение состояния видимости
объекта
1. function initPage(objectID, state)
{-.}
Добавьте функцию initPage() в ваш
JavaScript. Эта функция задает началь-
ную видимость объектов при первой
загрузке страницы.
2. function findVisibility(objectlD) {...}
В JavaScript добавьте функцию f indVisi-
bility(), применяющую ID объекта, к
которому обращается. ID передается
в функцию как переменная objectID.
Таким образом создается DOM. Затем
функция использует этот ID для доступа
к текущему свойству видимости, уста-
новленному для объекта. В зависимости
от полученного значения функция воз-
вращает либо visible, либо hidden.
3. ttobjecti {...}
С помощью значений position, type
и visibility установите ID объектов.
Рис. 12.6. Сколько времени мы будем видеть
Чеширского кота?
Листинг 12.6. Функция findVisibilityO
определяет текущее состояние видимости
отдельного объекта на странице, которое может
иметь значение visible или hidden
<!DDCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.D Transitional//EN” “http://www.w3.org/
->TR/xhtml1/DTD/xhtmll-transitional.dtd”>
<html xmlns-'http://www.w3.org/l999/xhtml”>
<head>
<meta http-equiv-’content-type”
->content-'text/html;charset=utf-B" />
<title>DHTML & CSS for the WWW [
->Finding an Object’s Visibility</
->title>
<script language=”JavaScript’'
->type-"text/javascript’’><!-
function initPage(objectID. state) {
var object = document.getElementByld
-> (objectID);
object.style.visibility = state;
}
function findVisibility(objectlD) {
var object = document.getElementByld
-> (objectID);
if (object.style.visibility)
return object.style.visibility;
return (null);
}
// ->
Состояние видимости объекта [277]
Листинг 12.6 (окончание}
</script>
(code continues on next page)
<style type-"text/css" media-’screen"><!~
#objectl {
visibility visible;
position relative;
top: 5px;
left: 5px;
width: 640px,
}
-></style>
</head>
<Dody onload=”initPage(’object1’,’visible’)”>
<script language=”JavaScript"
->type-" text/javascript ">
function showVisibility(objectlD) {
var thisVis = findvisibility
-> (objectID);
alert(‘Visibility Status: ‘ +
->thisVis );
)
</script>
<a onclick=’’showVisibility(‘objectl’)”
i href=”#’’>Where is the Cheshire Cat?
‘ -></a><br />
<div id=”object1">
\ <img src=’’alice24.gif" alt="alice”
->height="435" width=”64D"
->border=''0” />
' </div>
: </body>
</html>
4. onLoad="..
Чтобы инициализировать видимость
нужных объектов, используйте в теге
<body> функцию setVisibi 1 itу().
5. function ShowVisibility(objectlD) {...}
Создайте функцию JavaScript, в которой
применяются функции, определенные
на шаге 2. В этом примере функция
ShowVisibilitу(} просто присваивает
значения, возвращаемые функцией
findVisibilityO, переменным и за-
тем отображает их значения в преду-
преждении.
6. onClick=” ShowVisibility ('object!’)"
Чтобы запустить функцию, созданную
на шаге 5, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому хотите обратиться.
ЕВы также можете использовать JavaScript
для изменения этого состояния, как пока-
зано в разделе «Отображение и сокрытие
объектов» в главе 14.
I _ I Альтернативный (но не менее сложный)
(j метод определения видимости любого
।' объекта без предварительной установки
значения с помощью JavaScript представ-
лен в разделе «Определение значения соб-
ственности для стиля» в главе 16.
12761 Информация об объекте
Видимая область объекта
Зная высоту и ширину элемента, можно
определить максимальную область, кото-
рую он занимает на экране (см. раздел
«Размеры объекта»). Когда какая-либо
часть элемента отсекается (см. раздел «Оп-
ределение видимой части элемента» в гла-
ве 7), максимальная область сокращается,
и на экране отображается лишь часть ви-
димой области. С помощью JavaScript
можно выяснить не только ширину и вы-
соту видимой области, но и координаты
верхнего, нижнего, левого и правого края
отсекаемой части (листинг 12.7 и рис. 12.7).
Как и в случае с другими CSS-свойствами
видимости, в Netscape 6 и Internet Explorer
возникают трудности при чтении значе-
ний, связанных с отсекаемой частью, если
они не установлены динамически. В разде-
ле «Видимая область объекта» главы 14
показано, как избежать этих проблем и по-
лучить возможность менять отсекаемую
часть объекта.
Рис. 12.7. В предупреждении указано положение
верхнего края вырезанной области
Листинг 12.7. Функции findClipTopO, findClipRight(), findClipBottom(), findClipLeft().
findClipWidth() и findClipHeightQ определяют отсекаемую область и границы отдельного
объекта на странице
, ~о'|
<’DDCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://ww.w3.org/TR/
->xhtml1/DTD/xhtmli-transitional.dtd”>
<html xmlns=’’http://www.w3.org/l999/xhtml”>
<head>
<meta http-equiv-’content-type” content=’’text/ntml;charset=utf-8" />
<title>DHTML & CSS for the WWW | Finding an Dbject’s Clipped Area</title>
<script language-’JavaScript’’ type="text/javascript”>
function setClip(objectID, clipTop, clipRight, clipBottom, clipLeft) {
var object = document.getElementByld(objectlD);
object.style.clip = ’rect(’ + clipTop + *px • + clipRight + *px ’ + clipBottom
->+ ‘ px ’ + clipLeft +’px)’;
}
function findClipTop{objectID) {
var object = document.getElementByld(objectlD);
if (object.style.clip !=null) {
var clip = findClipArray(object.style.clip);
Видимая область
Листинг 12.7 (продолжение}
М Tz.---. ।чг .д—!... . —- ..г. . ЛистинГга*^.~а»а..
return (clip[OJ) ;
}
return (null),
}
function findClipRight(objectlD) {
var object = document.getElementByld(objectlD);
if (object.style.clip !=null) {
var clip = findClipArray(object.style.clip);
return (clip[1J) ;
}
return (null);
}
function findClipBottom(objectlD) {
var object = document.getElementByld(objectlD);
if (object.style.clip !=null) {
var clip = findClipArray(object.style.clip);
return (clip[2J) ;
}
return (null);
}
function findClipLeft(objectlD) {
var object = document.getElementByld(objectlD);
if (object.style.clip !=null) {
var clip - findClipArray(object.style.clip);
, return (clip[3J) ;
! }
return (null);
}
function findClipWidth(objectlD) {
var object = document.getElementByld(objectlD);
if {object.style.clip ’=null) {
var clip = findClipArray(object.style.clip);
return (clip[1] - clip[3J) ;
}
return (null);
J
function findClipHeight(objectID) {
var object = document.getElementByld(objectlD);
if (object.style.clip !=null) {
var clip = findClipArray(object.style, clip);
return (clip[2] - clip(OJ) ;
}
return (null);
12801 Информация об объекте
Листинг 12.7 (окончание)
т.х..,-’, и,,.... _ ,‘Листинг- у.. • - , .лаягжО!
function findClipArray(clipStr) {
var clip = new-Array();
var i;
i = clipStr.indexOfC(‘);
ClipEO] = parse!nt(clipStr.substring(i + 1, clipStr.length), ID);
i = clipStr.indexDf(' i + 1};
clip[1] - parseInt(clipStr.substring(i + 1, clipStr.length), ID);
i = ClipStr. indexOfC ', i + 1);
clip[2] = parse!nt(clipStr.substring^ + 1, clipStr.length), 10);
i = clipStr.indexOfC i + 1);
clip[3] = parse!ht(clipStr.substring(i + 1, clipStr.length), Ю);
return clip;
}
</scnpt>
<style type=”text/css" media="screen"><!-
#objectl {
position: absolute;
top: 60px;
left: 0;
overflow: hidden;
Clip: rect(l5px 350px 195рх 50px}
}
-></style>
</head>
<body onload=”setClipCobject!',15,350,195,50)”>
<br />
<br />
Clip Dimensions || <a onclick="alert(’Clip on Top: ' + findClipTop(*objectl’) + 'px')” href=”#’’>
->Top </a>| <a onclick=”alert(’Clip on Left: ' + findClipLeftCobject!’) + ’px’)” href=”#’’>
->Left </a>| <a onclick=’’alert(‘Clip on Bottom: ' + findClipBottom(’object1’) + 'px')” href=’’#’’>
->Bottom </a>| <a onclick=”alert(’Clip on Right: ' + findClipRightC objects) + ’px’)’’ href=”#”>
->Right </a>|| <a onclick=”alert('Clip Width: ‘ + findClipWidthC object!’) + 'px')” href-'#">
->Width </a>| <a onclick="alert(’Clip Height: ' + findClipHeightCobject!’) + ‘px’)” href=”#">
->Height </a>
<div id="cob]ect1”>
<img src="alice31.gif” height="4BD" width=”379” border="0” />
</div>
</body>
</html>
Видимая область объекта 281
Обнаружение видимой области
и границ объекта
I. function setClip(objectID, state) (...)
В сценарий JavaScript добавьте функ-
цию setClipO, которая устанавливает
начальную отсекаемую область объек-
тов при первой загрузке станицы. Это
позволяет обойти ограничения Internet
Explorer 4/5/6 и Netscape 6.
2. function findClipTop(objectlD) (...)
Добавьте функции findClipTop(), find-
ClipRight(), findClipBottomf), find-
ClipLeft(). Все они выполняют один
н те же действия на разных сторонах
объекта и используют ID объекта, к кото-
рому обращаются. ID передается в функ-
цию как переменная objectID. Таким об-
разом создается DOM. Затем функция
использует DOM, чтобы получить раз-
мер отсекаемой области. Для этого в Net-
scape применяются свойства clip, top,
clip.left, clip.bottom, clip.right.
С помощью findClipArray() функции оп-
ределяют отсекаемую область, затем они
получают доступ к массиву, используяО, 1,
2, 3 для верхней, левой, нижней и правой
сторон соответственно.
3. function findClipWidth(objectID) (...)
В сценарий JavaScript добавьте функции
findClipWidthf) и findClipHeight().
При обращении к объекту они задей-
ствуют его ID, который передается в
функцию как переменная objectID. Та-
ким образом создается DOM. Затем с
помощью DOM функция получает вы-
соту и ширину видимой области. Для
этого в Netscape используются свойства
clip, width и clip, height, а в Internet
Explorer вычитаются соответствующие
значения массива (см. шаг 4).
4. function findClipArray(str) (...)
В сценарий JavaScript добавьте функ-
цию findClipArray(). Она используется
Internet Explorer, который хранит раз-
меры отсекаемой области в символь-
ном виде, а не в виде чисел. Функция
переводит строку символов в массив
чисел, каждое число в массиве соответ-
ствует одному из размеров отсекаемой
области.
5. #objectl (...)
С помощью значений position, type и
visibility установите ID объектов.
6. onLoad="..."
Чтобы инициализировать отсекаемую
область всех объектов, используйте
в теге <body> функцию setClip().
7. onClick="alert (...)"
Чтобы запустить функции, созданные
на шаге 3 и 4, добавьте обработчик со-
бытий.
। л i Для прямого доступа к объектам Netscape
(д также может обращаться к значениям
।' посредством объектов clip.height,
clip.width, clip.top, clip.left,
clip, bottom и clip, right. Так как Internet
Explorer не поддерживает зту функцию, мы
рекомендуем использовать методику, опи-
санную выше.
С
Альтернативный (но не менее сложный) ме-
тод определения области обрезки для любо-
го объекта без предварительной установки
значения с помощью JavaScript представлен
в разделе «Определение значения собствен-
ности для стиля» в главе 16.
ИНФОРМАЦИЯ
О (ШИ
13
В главе 1D мы говорили о том, как исполь-
зовать триггеры событий для активации
функций JavaScript. Триггер можно приме-
нять к различным объектам на странице,
чтобы задавать реакцию объекта на опре-
деленные события. События также вклю-
чают информацию о том, как произошло
данное событие: когда оно произошло, ка-
кой объект его вызвал, и (в случае с мы-
шью и клавиатурой) какая клавиша была
нажата.
В этой главе мы узнаем, как получать и
обрабатывать информацию, сгенериро-
ванную событием.
Какое событие произошло
После того как событие произошло, акти-
вированная им функция необязательно
должна знать, как именно она была активи-
рована. Объект evt. type может сообщить
вам, какое событие произошло. Это позво-
ляет написать функцию, которая будет по-
разному реагировать на различные события
(листинг 13.1 и рис. 13.1).
Рис. 13.1. Тип события, которое активировало
функцию (в данном случае перемещение курсора
мыши вниз) показан в предупреждающем
сообщении
Какое событие произошло |283|
Листинг 13.1. Объект evt. type используется для идентификации события, которое активировало функцию
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.огдДР/хИШ1/
->DTD/xhtmli-transitional,dtd”>
<html xmlns="http://www.w3.org/l999/xhtml">
<head>
cmeta http-equiv="content-type" content=”text/html;charset=utf-8" />
<title>DHTML & CSS for the WWW | Detecting Which Event Type Fired</title>
<script language^’JavaScript" type="text/javascript"><!-
function initPage(objectlD) {
var object = document.getElementByld(objectlD);
object.onmousedown = findEventType;
document.onclick = findEventType;
}
function findEventType(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
if (evt.type)
alert('This was triggered by a ' + evt.type + ’ event.’);
}
// ->
</scnpt>
<style type-’text/css" media="screen"><!-
tobjectl {
visibility: visible;
position: absolute;
top: 50px;
left: ЮОрх;
width: 410рх;
border: solid 2px gray;
}
-></style>
</head>
<body onload="initPage(‘object1' )">
Click me and I will tell you what type of event this is.<br />
<br />
<div id-'objectT’>
<img src="alice06a.gif" height=’’48D" >width="392” border="0” alt=”alice" />
</div>
</body>
</html>
12841 Информация о событии
Событие какого типа произошло
1. function initPage(objectlD)
Добавьте в ваш код функцию init
Page(). Также вы можете добавить к
объекту, объектам или всему докумен-
ту связанные события (см. раздел «При-
вязка событий к объектам» в главе 10).
2. function findEventType(evt)
Добавьте в ваш код функцию find-
EventType(). Этот код использует функ-
цию передачи события (см. раздел «Пе-
редача событий функции» в главе 10),
чтобы позволить Internet Explorer и Net-
scape работать вместе:
var evt = (evt) 9 evt:
->((window.event) 9 event "null))
Затем функция использует объект
evt. type, чтобы идентифицировать со-
бытие, которое активировало функцию.
В этом примере мы просто добавили
предупреждающее сообщение, которое
указывает на тип события. Вы можете
использовать команду if, чтобы настро-
ить кодировку для различных событий.
3. onload=”initPage(‘object1’)”
Добавьте триггер onload в тег <body>, что-
бы активировать функцию initРаде(),
которую вы создали в пункте 1. Это на-
строит события для страницы.
Хотя в этом примере мы использовали
(J | привязку, также можно использовать триг-
'--1 гер, помещенный непосредственно в теге.
Помните, что нужно передать переменную
события в вызов функции:
onclick=”findEventType(event)”
Какая клавиша была нажата 12851
Рис. 13.2. В предупреждающем сообщении
отображено числовое значение для клавиши,
которую нажал пользователь. В данном случае это
90 (клавиша Z)
Какая клавиша
была нажата
Хотя события onkeydown, onkeyup и onkey
press позволяют вам определить, что кла-
виша была нажата, вы не знаете, какая
именно клавиша это была. Чтобы узнать
это, вам необходимо использовать объект
evt. charCode для Netscape или evt. keyCode
для Internet Explorer. Обе функции возвра-
щают числовое значение для нажатой кла-
виши (листинг 13.2 и рис. 13.2). Затем вы
можете использовать это значение для оп-
ределения нажатой клавиши (обратитесь к
приложению Е, где указаны все клавиши
и соответствующие числовые значения).
Листинг 13.2. Для определения кода нажатой клавиши используется объект evt.charCode для Netscape
или evt. keyCode для Internet Explorer
. ..........Листинг . - > Л. . ...
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1. D Transitional//EM" “http://www.w3.огдЛВ/х1Лт11/
->DTD/xhtmli-transitional.dtd”>
<html xmlns="http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8” />
<title>DHTML & CSS for the WWW | Detecting Which Key Was Pressed</title>
<scnpt language-'JavaScript” type='’text/javasQript"><’-
function initPageO {
window.document.onkeydown=findKey;
}
function findKey(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
if (evt.type == ‘keydown') {
var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
alert ('Character Code = ‘ + charCode);
}
}
// ->
</script>
</head>
<body onload=”initpage()">
Press any key to find its character codeKbr />
<br />
</body>
</html>
12861 Информация о событии
Какая клавиша была нажата
1. function initPage()
Добавьте в ваш код функцию init
Page(). Привяжите событие к объекту
(см. раздел «Привязка событий к
объектам» в главе 10). В этом приме-
ре мы ставили цель определить, была
ли нажата клавиша на загруженной
странице, поэтому мы использовали
команду window, document. Также вы
можете привязать событие к полю вво-
да формы, чтобы определять нажатия
клавиш только в данном поле.
2. function findKey(evt) {...}
Добавьте в ваш код функцию f indKey().
Этот код использует функцию переда-
чи события (см. раздел «Передача со-
бытий функции» в главе 10), чтобы по-
зволить Internet Explorer и Netscape ра-
ботать вместе:
var evt = (evt) ? evt:
->((window.event) ? event : null))
Затем функция использует объект
evt .charCode (в Netscape или Mozilla) или
evt. keyCode (в Internet Explorer), чтобы
идентифицировать нажатую клавишу
по числовому значению (см. Приложе-
ние D). В этом примере мы просто доба-
вили предупреждающее сообщение, ко-
торое указывает на числовое значение.
Вы можете использовать команду if,
чтобы настроить кодировку для различ-
ных значений.
3. onload=”initPage()”
Добавьте триггер onload в тег <body>,
чтобы активировать функцию init
Page(), которую вы создали в пункте 1.
Это настроит события для страницы.
Должен ли я использовать onkeydown,
onkeyup или onkeypress?
Хотя триггеры onkeypress и onkeyup
тоже определяют нажатие клавиши,
onkeydown дает более надежную инфор-
мацию (для различных браузеров) о
нажатой клавише.
Этот код не будет работать в Safari 1.
Какая клавиша-модификатор была нажата 12871
Рис. 13.3. В предупреждающем сообщении
показано, какая клавиша-модификатор была
нажата
Какая клавиша-
модификатор была нажата
В отличие от обычных клавиш, клавиши-
модификаторы (Shift, Control, Alt/Option
и Command) не имеют числового значе-
ния. Вместо этого данные клавиши мож-
но определить напрямую из события, что
позволяет вам настраивать кодировку в
зависимости от нажатой клавиши (лис-
тинг 13.3 и рис. 13.3). Каждая клавиша
имеет свой уникальный эффект: sh i ft Key,
ctrlKey, altKey и metaKey (для клавиши
Apple Command).
Листинг 13.3. Для определения того, какую клавишу-модификатор нажал пользователь, применяются
Объекты evt.shiftKey, evt.ctrlKey, evt.altKey и evt.metaKey
.. ЛИСТИНГА- **...,r.-<................
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Transitional//EM” '‘http://www.w3.org/TR
->xhtml1/DTD/xhtmll-transitional. dtd">
<html xmlnss”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv='’content-type" content="text/html;charset=utf-8" />
<title>DHTML & CSS for the WWW | Detecting Which Modifier Key Was Pressed</title>
<script language-'JavaScnpt" type=’'text/javascript”><!~
function initPage() {
window.document.onkeydown=findModifierKey;
}
function findModifierKey(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
if (evt.shiftKey) alert (‘The Shift key has been pressed');
if (evt.ctrlKey) alert (‘The Control key has been pressed’);
if (evt.altKey) alert (‘The Alt/Dption key has been pressed');
if (evt.metaKey) alert (‘The Command key has been pressed');
// ->
</script>
</head>
<body onload="initPage(>”>
Press any modifier key (Shift, Control, Option/Alt, or Command)<br />
</body>
</html>
[ 288] Информация о событии
Какая клавиша была нажата
1. function initPageO {...}
Добавьте в ваш JavaScript функцию
initPagc(). Привяжите событие keydown
к объекту (см. раздел «Привязка собы-
тий к объектам» в главе 10). В этом при-
мере мы ставили цель определить, была
ли нажата клавиша на загруженной
странице, поэтому мы использовали
команду window, document. Также вы мо-
жете привязать событие к полю ввода
формы, чтобы определять нажатия кла-
виш только в данном поле.
2. function findModifierKey(evt) {...}
Добавьте в ваш JavaScript функцию
findModifierKey(). Этот код использу-
ет функцию передачи события (см. раз-
дел «Передача событий функции» в гла-
ве 10), чтобы позволить Internet Explo-
rer и Netscape работать вместе:
var evt = (evt) ? evt:
->((window.event) ? event : null))
Затем функция оценивает событие для
каждого объекта клавиши-модифика-
тора, чтобы определить, верно ли оно
(то есть была клавиша нажата или нет).
В этом примере мы просто добавили
предупреждающее сообщение, которое
указывает на нажатую клавишу-моди-
фикатор. Вы можете использовать ко-
манду if, чтобы настроить кодировку
для различных модификаторов.
3. onload="initPage()"
Добавьте триггер onload в тег <body>,
чтобы активировать функцию init-
PageO, которую вы создали в пункте 1.
Это настроит события для страницы.
Е Пользователи Windows должны знать, что
на Мас клавиша Alt обозначена как Option.
Функции этих клавиш одинаковые.
Г_ I На Мас клавиша Control используется как
(д модификатор вместе с кнопкой мыши
।1 (вместо правого щелчка мыши в Windows).
Какая кнопка мыши была нажата 12891
Рис. 13.4. В предупреждающем сообщении
отображено числовое значение для кнопки мыши,
которую нажал пользователь
Какая кнопка мыши
была нажата
Компьютерная мышь - это устройство,
предназначенное не только для управле-
ния компьютером, но и для навигации на
Web-страницах. В большинстве случаев
для Web-страниц используется только
одна кнопка мыши (вы щелкаете ею по
ссылкам, выбираете пункты меню, поля,
переключател н).
Используя средства DHTML, вы можете
определить, какую кнопку мыши нажал
пользователь. Для этого применяется
объект evt. button и скрипты (листинг 13.4
и рис. 13.4). Например, вы можете сделать
так, чтобы ссылка работала как обычная
гиперссылка при щелчке левой кнопкой
мыши, но ее можно было перемещать при
щелчке правой кнопкой мыши.
Листинг 13.4. Для определения того, какая кнопка мыши активировала событие, применяется объект
evt. button
; . j . лй’ЧК J::';J;;/- r O,|
CDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR
->xhtmli/DTD/xhtml1-transitional. dtd">
<html xmlns=”http://www.w3.org/l999/xhtmT'>
<nead>
<meta http-equiv="content-type” content=”text/html;charset=utf-8” />
<title>DHTML Samp; CSS for the WWW | Detecting Which Mouse Button Was Clicked</title>
<script language="JavaScript" type="text/javascript"><! -
function initPage(objectlD) {
var object = document.getElementByld(objectlD);
object.onmousedown = findMouseButton:
}
function findMouseButton(evt) {
evt = (evt) ? evt : ((window.event) ? event : null):
if (typeof evt.button != 'undefined') {
alert(‘Mouse Button Value = ' + evt.button);
}
// ->
</script>
<style type=”text/css" media=’’screen"><! -
IO Twit Дж к
12901 Информация о событии
Какая кнопка мыши была нажата
1. function initPageO (...)
Добавьте в ваш JavaScript функцию
1 nit Page (). Привяжите событие mouse-
down к объекту (см. раздел «Привязка
событий к объектам» в главе 10). В этом
примере мы ставили цель определить,
была ли нажата кнопка мыши на Web-
странице, поэтому мы использовали
команду window, document. Также вы
можете привязать событие к любому
объекту на странице.
2. function findMouseButton(evt)
Добавьте в ваш JavaScript функцию
findMouseButton(). Этот код использует
функцию передачи события (см. раздел
«Передача событий функции» в главе
10), чтобы позволить Internet Explorer и
Netscape работать вместе, а затем оце-
нивает объект evt.button и определяет
его значение. К сожалению, Netscape и
Internet Explorer будут выдавать различ-
ные значения (см. табл. 13.1).
В этом примере мы просто добавили
предупреждающее сообщение, которое
указывает, какая кнопка мыши была
нажата.
3. onload="initPage()”
Добавьте триггер onload в тег <body>,
чтобы активировать функцию init
Page(), которую вы создали в пункте 1.
Это настроит события для страницы.
I I Помните, что стандартная мышь Мас имеет
(j | только одну кнопку (имеющую функции ле-
'----1 вой кнопки), а в качестве щелчка правой
кнопки используется Control+щелчок. Мно-
гие PC-мыши не имеют центральной кнопки.
Листинг 13.4 (окончание)
#object1 {
visibility: visible;
position: absolute;
top: 50px;
left: lOOpx;
width: 410рх;
border: solid 2px gray
}
-></style>
</head>
<body onload=”initPage(‘objectl‘)">
Click me and I will tell you which mouse
->button you pressed.<br />
<br />
<div id="objectr>
<img src="aliceO6a.gif" height=”480”
->width=”392" border-'O” alt=,'alice"
/>
</div>
</body>
</html>
Таблица 13.1. Значения для определения кнопки
мыши
Кнопка Internet Explorer * Netscape
None 0 null
Left 1 0
Middle 4 1
Right 2 2
* Включая Safari и Opera
Г^“1 При щелчке правой кнопкой мыши (или
(j | Control+щелчок) обычно открывается кон-
1----1 текстное меню. Если в качестве триггера
для определения щелчка правой кнопкой
мыши вы будете использовать объект
onmouseup или onclick, он будет проигно-
рирован, так как контекстное меню отме-
нит все прочие события.
Где был выполнен щелчок мыши 12911
Рис. 13.5. Предупреждение сообщает вам о том,
где именно в окне браузера вы щелкнули
(evt.clientX и evt.clientY)
Где был выполнен
щелчок мыши
Помните, что куда бы вы ни шли, куда-
нибудь вы придете точно. Если вы желае-
те знать, где именно вы находитесь в окне
браузера, вы можете использовать скрипт
(листинг 13.5 и рис. 13.5).
Все активированные мышью события
включают информацию в объекте evt. Эта
информация говорит не только о том, где в
окне браузера произошло событие (ciientX
и clientY), но и где на всем экране про-
изошло это событие (screenX и screeny,) -
рис. 13.6.
Листинг 13.5. Для определения положения курсора мыши в окне браузера используются объекты
evt. clientx и evt. clientY. Для определения положения курсора мыши ео всем окне используются
объекты evt.screenX и evt.screenY
<!DDCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" '‘http://www.w3.org/TR
->xhtmll/DTD/xhtmli-transitional.dtd">
(html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content=”text/html;charset=utf-8" />
<title>OHTML & CSS for the WWW | Detecting Where the Mouse Clicked</title>
(script language=”JavaScript" type="text/javascrjpt"><!-
function initPage() {
document.onclick = findMouseLocation;
}
function findMouseLocation(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
alert (‘Browser horizontal = ‘ + evt.clientX + Browser vertical = ' + evt.clientY);
alert ('Screen horizontal = ’ + evt.screenX + Screen vertical = ' + evt.screenY);
}
// ->
</scnpt>
(style type-'text/css” media="screen"><! -
#object1 {
visibility: visible;
position: absolute;
top 50px:
left. lOOpx;
width 4Wpx;
border; solid 2px gray
12921 Информация о событии
Определить положение курсора
мыши в окне браузера
1. function initPageO {...}
Добавьте в ваш JavaScript функцию
in it Page(). Привяжите событие mouse-
down к объекту (см. раздел «Привязка
событий к объектам» в главе 10). В этом
примере мы ставили цель определить
положение курсора мыши независимо
от того, была нажата кнопка мыши на
Web-странице или нет, поэтому мы ис-
пользовали команду window, document с
триггером onclick. Также вы можете
привязать событие к любому объекту
на странице.
2. function findMouseLocation(evt) {...}
Добавьте в ваш JavaScript функцию
findMouseLocation(). Этот код использу-
ет функцию передачи события (см. раз-
дел «Передача событий функции» в гла-
ве 10), чтобы позволить Internet Explorer
и Netscape работать вместе. Используйте
объекты evt.clientX и evt. clientY,что-
бы определить положение курсора
мыши в окне браузера. Для определения
положения курсора мыши во всем окне
используйте объекты evt.screenX и
evt.screenY.
В этом примере мы просто добавили
предупреждающее сообщение, которое
указывает положение курсора мыши.
Листинг 13.5 (окончание)
-></style>
</head>
<dody onload="initPage()”>
Click me and I will tell you where you
clicked.<Dr />
<Dr />
<img src="alice06a.gif" height="480”
->width="392" border-’0" alt="alice”
/>
</body>
</html>
Где был выполнен щелчок мыши 12931
> p. Б* ДО. ф QccMmA, 1«й ДО
Q>«t,Qe©e
<•?: WKOw i taqt'Ma lavojCMl» crhrr T«4 : V*-Scvra i HeraF»M»dT«b
Рис. 13.6. Предупреждение сообщает вам о том,
где именно на всем экране вы щелкнули
(evt.screenX и evt.screenY)
3. onload=”initPage()”
Добавьте триггер onload в тег <body>,
чтобы активировать функцию in it
Page(), которую вы создали в пункте 1.
Это настроит события для страницы.
I _ I Если вы пытаетесь определить положение
(j курсора мыши на Web-странице (а не на всем
'---’ экране), вам нужно добавить значения поло-
жения для прокрутки в значения положения
для курсора мыши.
I Л”| Netscape также может использовать объ-
Q екты РадеХ и PageY, чтобы определить по-
’---1 ложение на Web-странице.
I л j Хотя положение курсора мыши по оси Y
(J I (clientY) определяется от верхней грани-
।1 цы окна браузера, положение по оси Y на
экране (screenY) определяется от нижней
границы экрана.
0(Ш ДШМЖШ
ТШОМГМЙ
14
Почти весь DHTML основан на нескольких
приемах, с помощью которых можно скры-
вать и снова отображать объекты, переме-
щать и изменять их. В большинстве случа-
ев эти технологии основаны на изменении
свойств позиционирования в CSS, то есть
единственных общих для всех браузеров
CSS-свойств, которые разрешается менять.
В Netscape 4 невозможно получить доступ
к каким-либо другим CSS-свойствам.
В Netscape 6 н Internet Explorer 4 допусти-
мо менять любые CSS-свойства, но из-за
Netscape 4 в DHTML, общем для браузеров,
появляются ограничения. Однако, возмож-
но, с выходом Netscape 6 предыдущая вер-
сия, Netscape 4, уйдет в прошлое.
Отображение и сокрытие
объектов
Одной из ключевых функций динамичес-
кого Web-сайта является возможность уп-
равления видимостью объекта. Это позво-
ляет нам скрывать и отображать объект в
любой момент, пока пользователь находит-
ся на Web-сайте. С помощью JavaScript мы
можем указать, виден объект или нет. Изна-
чально этот параметр задается в CSS, кото-
рая предлагает два различных способа уп-
равления видимостью объекта:
с помощью функции visibility: пара-
метр hidden будет сохранять место для
объекта, пока он скрыт (как Человек-
невидимка, контуры которого в одежде
обозначены на экране, даже если вы его
и не видите). Если для функции visi-
bility задается значение visible, объект
занимает данное место;
с помощью функции display: параметр
попе полностью удаляет объект с экрана,
не оставляя для него места. Если впос-
ледствии стиль отображения для объек-
та изменяется на другой (block, inline
и т.д.), объект будет повторно разме-
щен на Web-странице, даже если потре-
буется перерисовать страницу, чтобы
поместить его.
Отображение и сокрытие объектов 12951
Листинг 14.1. Функции setVisibilityO
и toggleVisibi 1 ity () изменяют состояние
видимости отдельного объекта в окне браузера
ЛИСТИНГ
ODDCTYPE html PUBLIC “-//W3C//DTD XHTML
->1.0 Transitional//EN" “http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns='’http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv-'content-type"
->content="text/html;charset=utf-B" />
<title>DHTML & CSS for the WWW |
->Making Objects Appear and Disappear J
->Changing Visibility Style</tltle>
<script language="JavaScript"
->type='’text/javascript"><! -
function setVisibility(objectID,state) {
var object = document.getElementByld
-> (objectID);
object.style.visibility = state;
>
function toggleVisibility(objectlD) {
var object = document.getElementByld
-> (objectID);
state = object.style.visibility;
if (state == ’hidden’)
object.style.visibility = ‘visible’;
else {
if (state == ‘ visible’)
object.style.visibility = ‘hidden’;
else object.style.visibility = 'visible';
}
}
// ->
</script>
<style type-'text/css’’ media=’'screen"><!-
flcheshireCat {
visibility: visible;
}
-></style>
</head>
<body onload=''setVisibility(' cheshireCat',
->’visible'), ">
<a onclick='‘setVisibility(’ Cheshire
->Cat’,’hidden');" href="javascript:
->void(‘')">Hide the Cat</a> |
Изменение состояния видимости
объекта
С помощью свойств, определяющих види-
мость элемента, можно указать, будет он ви-
ден на экране (visible) или нет (hidden)-
см. раздел «Определение видимости элемен-
та» в главе 7. С помощью JavaScript опре-
деляется не только текущее состояние види-
мости, но и предыдущее и последующее (лис-
тинг 14.1, рис. 14.1 и 14.2):
1. function setVisibility(objectID, state)
(...)
В сценарий JavaScript добавьте функ-
цию setVisibilityO. При обращении
к объекту она задействует его ID, ко-
торый передается в функцию как пе-
ременная objectID. Таким образом со-
здается DOM. Затем функция приме-
няет этот ID для доступа к текущему
свойству видимости, установленному
для этого объекта, и изменяет его в за-
висимости от того состояния, которое
вы определили при запуске функции
из обработчика событий (см. шаг 6).
Листинг 14.1 (окончание)
866
Листинг
<а onclick=”setVisibility(‘cheshireCat’,
->’ visible1);" href="javascnpt:void(’' )">
->Show the Cat</a> |
<a onclick="toggleVisibility('Cheshire
->Cat’);" href="javascript:void(‘’)">
->Change the Cat’s Visibility</a>
<div id="cheshireCat">
<img src=''alice24. gif" height="283"
->width=”416" border="0’’ />
</div>
<h1>The Cheshire Cat</h1>
</body>
</html>
2961 Основы динамических технологий
2. function toggleVisibility(objectlD)
f.}
В сценарий JavaScript добавьте функ-
цию toggleVisibility(). При обраще-
нии к объекту она использует его ID,
который передается в функцию как пе-
ременная objectID. Таким образом со-
здается DOM. Затем функция проверяет
текущее состояние видимости и изменя-
ет его на противоположное.
3. ftcheshireCat {. }
С помощью значений position, type
и visibility установите ID объектов.
4. onLoad= ..."
Чтобы инициализировать видимость
нужных объектов, используйте в теге
<body> функцию setVisibility(). Что-
бы функция toggleVisibilityO рабо-
тала соответствующим образом, нуж-
но установить начальную видимость.
5. onClick='setVisibility (’objectl’)"
Чтобы запустить функцию, созданную
на шаге 1, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому хотите обратиться.
6. onClick= setVisibility
->('cheshireCat',’hidden');"
Чтобы запустить функцию, созданную
на шаге 2, добавьте обработчик собы-
тий и передайте ему ID объекта, к кото-
рому вы хотите обратиться, и состоя-
ние видимости, которое требуется при-
своить объекту.
7. <div id=' cneshireCat">...</div>
Установите CSS-слои.
The Cheshire Cat
Рис. 14.1. До того момента, как посетитель нажмет
на ссылку, кот остается на экране
8ОС OHTML&CSS for the WWW | Making Objects Appear iO
4» *5» > w £ *
J-hda The Ca? | Sho* the Cat ( Change the Cat» Viability
If
The Cheshire Cat
Рис. 14.2. После того как посетитель нажал
на ссылку, Чеширский кот исчез
п
Заметьте, что в качестве возможных значе-
ний состояния определяются не только зна-
чения visible или hidden, но и show или
hide. Netscape 4 принимает стандартные
значения visible или hidden, но он запи-
сывает их как show или hide, и такими они
остаются на выходе.
Изменение стиля отображения [297]
0 0 0 DHTML & CSS for Oie WWW 1 Making Objects Appear lO
The Cheshire Cat
Изменение стиля
отображения
Параметр display позволяет сообщить
объекту, как он должен восприниматься ок-
ружением, например, в качестве элемента
block, в качестве элемента inline или так, как
если бы его вообще не было (см. раздел «Из-
менение внешнего вида элемента» в главе 5).
С помощью JavaScript (листинг 14.2) вы мо-
жете задать не только текущий стиль отобра-
жения, но и изменения для этого состояния
(рис. 14.3 и 14.4).
' Jtmczlpt:vald(“l
Phc. 14.3. Перед тем как вы щелкните по ссылке
для изменения стиля отображения, будут видны
кот и надпись под страницей
0 0 0 DHTML & CSS for the WWW | Making Objects Appear aO
£ 5 : (ДО '»® i
! feme The Ca? I Display the Cat ( Change the Cars Display State |
The Cheshire Cat
ticcument: Don*
Рис. 14.4. После щелчка по ссылке Чеширский кот
исчезает, но надпись перемещается вверх, так как
объекта там больше нет (на рис. 14.2 надпись
остается на своем месте)
1298~| Основы динамических технологий
Изменение стиля отображения
для объекта
1. function setDisplay
->(objectIO, state) {...}
Добавьте в ваш JavaScript функцию
set Display(). Эта функция использует ID
адресуемого объекта (переданное как пе-
ременная objectID), чтобы найти объект,
который нужно изменить. Затем функ-
ция применяет ID для доступа к текуще-
му параметру display объекта и изменя-
ет его на указанное вами значение (при
активации с помощью триггера). Чтобы
скрыть объект, вам нужно использовать
значение попе.
2. function toggleDisplay
->(objectID) {..}
Добавьте в ваш JavaScript функцию
toggleVisibility(). Эта функция ис-
пользует ID адресуемого объекта (пере-
данное как переменная objectID), чтобы
найти объект. Затем функция проверя-
ет текущее состояние объекта и пере-
ключает его на попе, чтобы скрыть
объект, или на block (inline и так далее
в зависимости от вашего выбора), что-
бы его отобразить.
3. ttcheshireCat {...}
Задает ID для вашего объекта со значе-
нием стиля отображения.
4. onload=”setDisplay
->(*cheshireCat',’block’);”
Используйте функцию setDisplayO в
теге <body>, чтобы инициализировать
видимость всех объектов, для которых
вам нужно задать начальную види-
мость. Чтобы функция toggleDisp 1 ay()
работала правильно, необходимо ука-
зать начальное состояние.
Листинг14.2. Функции setDisplayO
и toggleDisplay() изменяют стиль отображения
для заданного объекта в окне браузера
<!D0CTYPE html PUBLIC “-//W3C//DTD XHTML
->1.0 Transitional//EN” "http://www.w3.org/
->TR/xhtmll/DTD/xhtmil-transitional.dtd">
<html xmlns=”http://www.w3.org/l999/xhtml”>
<head>
<raeta http-equiv=”coritent-type"‘
->content=’’text/html:charset=utf-B" />
<title>DHTML & CSS for the WWW |
->Making Objects Appear and Disappear |
->Changing Display Style</title>
<script language^’JavaScript"
->type="text/javascript'’><! -
function setDisplay(objectID,state) {
var object = document.getElementByld
-> (objectID);
object.style.display = state;
}
function toggleDisplay(objectID) {
var object = document.getElementByld
-> (objectID):
state = object.style.display;
if (state =s ’none’)
object.style.display = 'block';
else if (state I= 'none')
object.style.display « 'none';
}
// ->
</script>
<style type=‘'text/css'' media=’'screen’'><!-
#cheshireCat {
display:block;
}
-></style>
</head>
<body onload="setDisplay(’cheshireCat' <
->’block’); ">
<a
onclick=“setDisplay(’cheshireCat’.’none’); ”
->href="javascript:void(‘')">Remove the
->Cat</a> |
<a onclick=”setDisplay(‘cheshireCat’,
->'block’);" href="javascript:
->void('')">Display the Cat</a> |
Изменение стиля отображения 12991
Листинг 14.2 (окончание) 5. onclick=”setDisplay
: ^..,.Листингжй<и«^.;»;;й;кНг»<:гй;О| <а onclick-’toggleDisplay{'cheshireCat’);" ->href=,'javascript:void(' ’)">Change the ->Cat's Display State</a> <div id="cheshireCat’’> <img src-’alice24.gif” height="233” ->width="416” border=”0" /> </div> <h1>The Cheshire Cat</h1> </body> </html> ->(‘cheshireCat’,'none’);” Добавьте триггер, чтобы активировать функцию, созданную в пункте 1. Пере- дайте ей ID объекта, к которому вы желаете обратиться, а также требуемое состояние видимости. Повторите эти действия для всех объектов. 6. onlick="toggleDisplay ->('cheshireCat’)” Добавьте триггер, чтобы активировать функцию, созданную в пункте 2. Пере- дайте ей ID объекта, к которому вы желаете обратиться. Повторите эти действия для всех объектов. 7. <div id=”cheshireCat”>...</div> Настройте объекты. Г— I В обоих примерах нам пришлось использо- вать функцию JavaScript для начальной ।1 инициализации значений вместо того, что- бы полагаться на CSS. Это необходимо, так как JavaScript не может напрямую обра- щаться к значению стиля, пока вы не зада- ли это значение. Другую методику вы мо- жете найти в разделе «Определение значе- ния собственности для стиля» в главе 16. Г“л । В обоих примерах мы отдельно настраива- I V I ли ID стиля.
13001 Основы динамических технологий
Перемещение объектов
объект можно располагать на экране, ис-
пользуя CSS, затем с помощью JavaScript
легко выяснить положение объекта. Но
чтобы страница стала действительно ди-
намической, нужно также уметь переме-
щать объекты по экрану, меняя их поло-
жение (листинг 14.3 и рис. 14.5).
Изменение положения объекта
1. function moveDbjесtTo(оbjectID,х,у)
{-}
В сценарий JavaScript добавьте функ-
цию movcObjectToO. При обращении
к объекту она применяет его ID, кото-
рый передается в функцию как пере-
менная objectID. Таким образом со-
здается DOM. Затем функция исполь-
зует значения х и у для того, чтобы из-
менить свойства left и top. Помните,
что для того чтобы сохранить совмес-
тимость с XHTML, вы не можете при-
своить числовые значения для стилей
top и left. Вам придется задавать их в
качестве строк. Поэтому мы использу-
ем +’рх'.
2. tfmadHatter {...}
С помощью значений position, top и
left установите ID объектов.
3. onMouseDver="moveObjectTo
(’madHatter‘, 200, 20D);"
Чтобы запустить функцию, созданную
на шаге 1, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому вы хотите обратиться, и его но-
вые координаты.
4. <div id="madHatter">...</div>
Установите CSS-слои.
Листинг14.3. Функция moveObjectTo() меняет
положение отдельного объекта в окне браузера
ал:;.-. Листик:^^pj
<!DQCTYPE html PUBLIC "-//W3C//DT0 XHTML
1.0 Transitional//EN" ‘'http://www.w3.org
->TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtmr>
<head>
<meta http-eguiv="content-type"
->content="text/html:charset-utf-8" />
<title>DHTML Samp; CSS for the WWW |
Moving Objects from Point to Point</title>
<script language^"JavaScript"
->type="text/javascript'’><i -
function moveObjectTo(objectID,x,y) {
var object = document.getElementByld
->(object!D);
object.style.left = x +’px’;
object.style.top = у + ‘px’;
}
// ->
</script>
<style type="text/css’’ medla='’screen’’><,-
flmadHatter {
position: absolute;
top; 40px;
left: 30px
}
-></style>
</head>
<body>
<a onmouseover='‘moveObjectTo
-> (‘madHatter’,200,200); " onrouseout=
->"moveDbjectTo('madHatter',30,40);"
->href=”javascript:void(' ’ )’’>! want a
->fresh cup..,</a>
<div id="madHatter”>
<img src="alice39.gif" height-'163"
->width="200" border="0"
->alt="alice" />
</div>
</body>
</html>
Перемещение объектов |3011
вОО DHTML & CSS for th« WWW | Moving Objects from PonQ
Рис. 14.5. Болванщик ищет новую чашку чая
Помните, что значения положения в Netscape
(J и Internet Explorer могут немного различать-
----- ся (так как программы по-разному определя-
ют границу экрана).
। _ । Хотя мы задаем положение тор и left для
V перемещения объекта, вы можете использо-
।' вать только одно значение для перемеще-
ния объекта по горизонтали или вертикали.
"ТТ-! Если положение элемента определено как
(J relative, параметры top и left не будут
----- влиять на его поля. Это значит, что настрой-
ка верхнего и левого поля может привести к
тому, что содержимое будет перемещаться
вне своего поля и накладываться на другие
объекты.
С
Хотя параметры top и left не наследуют-
ся подчиненными элементами, вложенные
элементы перемещаются вместе с роди-
тельским. Таким образом, если родительс-
кий элемент переместился на 10 пикселей
влево, все вложенные элементы также пе-
реместятся на 10 пикселей, но отдельные
элементы затем перемещаться не будут.
13021 Основы динамических технологий
Перемещение объекта
на заданное расстояние
Уметь перемещать объект из одной точки
в другую весьма полезно, но необходимо
точно знать место, куда требуется переме-
стить объект. Часто же нужно просто пе-
редвинуть объект на заданное расстояние
(рис. 14.6). Для этого вам нужно сначала
определить положение объекта, а затем
добавить к нему значение для смещения
(листинг 14.4).
Перемещение объекта
1. function moveObjectBy
->(objectIO,deltaX,deltaY) {...}
В сценарий JavaScript добавьте функ-
цию moveObjectBy(). При обращении
к объекту она применяет его ID, кото-
рый передается в функцию как пере-
менная objectID. Таким образом со-
здается DOM. Затем функция заменяет
значения свойств left и top на значе-
ния del tax и deltaY. В Internet Explorer
устанавливаются значения pixelTop
и pixelLeft. В Netscape 6 задаются по-
ложения top и left, но их нужно доба-
вить и в текущее положение объекта.
В Netscape 4 положения не определя-
ются непосредственно, а используется
встроенная функция moveBy().
2. tfmadHatter {. }
С помощью значений position, top и
left установите ID объектов.
Листинг 14.4. Функция moveObjectByO меняет
положение отдельного объекта в окне браузера на
определенную величину каждый раз, когда
указатель мыши наводится на ссылку
Листинг..
<!DDCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN" ‘’http://www.w3. о rg
->TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/l999/xhtml”>
<head>
<meta http-equiv=”content-type”
->content="text/html;charset=utf-8” />
<title>DHTML & CSS for the WWW |
Moving Things by a Certain Amount</title>
<script language-'JavaScript”
->type="text/javascript”><! -
function moveObjectBy(objectID,deltaX,
->deltaY) {
var object = document.getElementByld
->(objectID);
if (object.offsetLeft != null) {
var plusLeft = object.offsetLeft;
var plusTop = object.offsetTop;
object.style.left = deltaX + plusLeft
->+’px’;
object.style.top = deltaY + plusTop
->+'px’;
}
}
// ->
</scnpt>
<style type="text/css" media=”screen”><!-
ffmadHatter {
position: absolute;
top: 40px;
left: 30px
}
-></style>
</head>
<body>
Перемещение объекта на заданное расстояние 13031
Листинг 14.4 (окончание)
<а onmouseover="mov60bjectBy
->(’ madHatter’,75,100);” onmouseout=
->"rnoveObgectBy('madHatter’,-25,-55);”
->href=”javascript:void(‘’ )”>I want a
->fresb cup ..</a>
<div id=''madHatter">
<img src="alice39.gif’’ height-”l63”
->width="200" border="0” />
</div>
</body>
</html>
3. onMouseOver="moveODjectBy
->('madHatter',75,100);"
Чтобы запустить функцию, созданную
на шаге 1, добавьте обработчик собы-
тий и передайте ему ID объекта, к ко-
торому вы хотите обратиться, и коли-
чество пикселей, на которое нужно
переместить объект. С помощью поло-
жительных значений объект передвига-
ется вниз и вправо, а с помощью отри-
цательных - вверх и влево.
4. <div id="madHatter">...</div>
Установите CSS-слои.
С
S06 DHTML b CSS for the WWW I Moving Things By a CeruO
*>*>*>' . (A) * :
Рис. 14.6. Болванщик передвигается с места
на место в поисках новой чашки чая
В Netscape 6 лучше не добавлять прираще-
ние непосредственно к свойствам left
и top. В Internet Explorer 4/5/6 для добавле-
ния значений delta к текущей позиции
объекта можно использовать +=, в Net-
scape 4 - функцию moveBy(), но в Netscape
6 придется вычислять текущее положение
объекта и добавлять значения delta, а за-
тем присваивать полученные значения
свойствам left и top.
Г_ “I Для установления позиции элемента проще
использовать свойства top и left, но если
'----' вы хотите переместить объект на опре-
деленное расстояние, придется использо-
вать pixeiLeft и pixelTop. Иначе Internet
Explorer перепутает эти значения, и объект
будет выступать за границы экрана.
13041 Основы динамических технологий
Перемещение объектов в 3D
Все позиционированные элементы мож-
но разместить в порядке стека (см. раздел
«Элементы в порядке стека (ЗЭ-позицио-
нирование)» в главе 6), а чтобы выяснить
порядок элементов и затем менять его,
используется JavaScript в z-индексе - лис-
тинг 14.5, рис. 14.7 и 14.8.
Определение 30-позиции объекта
1. varprevObjectID=null; var prevLayer=O;
В JavaScript инициализируйте две пере-
менные:
- prevObjectID. В ней хранится ID
предыдущего выбранного объекта;
- prevLayer. В ней хранится z-индекс
предыдущего выбранного объекта.
2. function setLayer(objectID, layerNum)
U
В сценарий JavaScript добавьте функцию
. setlayer(), которая присваивает свой-
ству z-index номер указанного уровня.
3. function f i nd Lays г (obj ectl D) {...}
В код JavaScript добавьте функцию
findLayer(). При обращении к объек-
ту она применяет его ID, который пе-
редается в функцию как переменная
objectID. Таким образом создается DOM.
Затем функция использует ID для то-
го, чтобы получить доступ к свойству
z-index, и возвращает это значение.
4. function swapLayer(objectlD) (...)
В сценарий JavaScript добавьте функ-
цию swap Layer (). Она уменьшает z-ии-
декс предыдущего выбранного уровня
(если таковой есть) и перемещает выб-
ранный слой вверх.
5. #object { }
С помощью значений position и z-
index установите ID объектов.
Q Q е DHTML a CSS for the WWW] Moving Object? in 3-D Q
<« ’ (д> X'
Рис. 14.7. Порядок объектов при первой загрузке
страницы
, Document; Done © л
Рис. 14.8. Изображения королевы и Алисы теперь
находятся на переднем плане
Перемещение объектов в 3D 1305 j
6. id=”alicei"
Настройте ваши объекты.
7. onClick="swapLayer('object1’)’’
Чтобы запустить функцию swap Laye г (),
добавьте в слой обработчик событий.
| -^”1 Если вы введете отрицательное значение для
z-индекса, то элемент будет скрыт под роди-
1---1 тельским элементом на много уровней ниже.
Листинг 14.5. В результате совместной работы функций swapLayer(), setLayer() и findLayeг() объект
перемещается на верхний уровень стека
♦ 0,0 .____________. .. Листинг л; ...»
<’OOCTYPE html PUBLIC 11-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
->xhtmH/DTO/xhtml1-transittonal.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type” content="text/html;charset=utf-B” />
<title>DHTML & CSS for the WWW | Moving Objects in 3-0</title>
<script language="JavaScript" type="text/javascript''><! -
var prevObjectID = null;
var prevLayer = 0;
function setLayer(objectID,layerNum) { f
var object = document.getElementByld(objectlD);
object.style.zlndex = layerNum;
}
function findLayer(objectlD) {
var object = document.getElementByld(objectlD);
if (object.style.zlndex != null)
return object.style.zlndex;
return (null);
}
function swapLayer(objectlD) {
if (prevObjectID != null)
setLayer(prevObjectID,prevLayer);
prevLayer = findLayer(objectlD);
prevObjectID = objectID;
setLayer(objectID,1000);
}
// ->
</scnpt>
<style type="text/css’’ media="screen"><!-
13061 Основы динамических технологий
Листинг 14.5 (окончание)
ЖОР-' -................Т-.< . ,г г...-—-Г.ЛИСТИНГ.. '." .л .- ~...... Г~ . . -
#alice1 {
position: absolute;
z-lndex: 3;
top: 175px;
left: 255px;
width: 100;
border: solid 2px gray;
}
#alice2 {
position: absolute;
z-index- 2;
top: 100px;
left: 170рх;
width: 140;
border: solid 2px gray;
}
#alice3 {
position: absolute;
z-index: 1;
top: 65px;
left: 85px;
width: 150;
border: solid 2px gray;
}
#alice4 {
position: absolute;
z-index: 0;
top: 5px;
left: 5px;
width; 200;
border: solid 2px gray;
}
-></style>
</head>
<body>
<img src="alice22.gif” height="147" width=”100” border=”0" ld="allcel" onclick="swapLayer
- > ('allcel’)" /><br clear="all” />
<img src=”alice32.gif” height=’’201” width=”140" border="0” id=”alice2” onclick-’swapLayer
- > (‘alice2’)” /><br clear=”all” />
<img src=”alicel5.gif" height=”198” width=”150" border=”0” id="alice3” onclick="swapLayer
- > (‘alice3’)” /><br clear=”all” />
<img src="alice29.gif” height=’’236” width=”200” border=”0” id=”alice4” onclick=”swapLayer
- > (’alice4’)” /><br clear="all” /> .
</body>
</html>
Рис.14.9. Чтобы узнать, почему улыбается
Чеширский кот, проведите указателем мыши
над ссылкой
Видимая область объекта ,307|
Видимая область объекта
Устанавливая размеры отсекаемой области,
мы определяем ту часть объекта, которая
будет видна на экране (см. раздел «Опре-
деление видимой части элемента» в гла-
ве 7). Если с объектом не производить ни-
каких действий, он остается видимым. Но,
отсекая какую-либо часть объекта, мы уста-
навливаем степень его видимости на экра-
не. Для определения отсекаемой области
используется JavaScript (см. раздел «Види-
мая область объекта» в главе 12). К тому же
с помощью DHTML можно легко изменять
отсекаемую область (листинг 14.6, рис. 14.9
и 14.10).
в Q О DHTML&CSS for the WWW I Finding an ObJecQ j
I 4-i «ft *9 !
i What ts the Cheshire Cat KnRing about? !
( javascript vokX") ®
Рис. 14.10. Чеширский кот смеется из-за того, что
Король не может приказать палачам отрубить
голову, у которой нет туловища. И это очень злит
Королеву
13081 Основы динамических технологий
Изменение видимой области
объекта
1. function setCliptobjectID,clipTop,
->clipRight, clipBottom, clipLeft) {...}
В сценарий JavaScript добавьте функ-
цию setClip(). При обращении к
объекту она использует его ID, кото-
рый передается в функцию как пере-
менная objectID. Таким образом созда-
ется DOM. Затем функция заменяет
отсекаемую область. В Netscape 4 и 6
это делается с помощью свойств отсе-
каемой области-top, right, bottom и
left, а в Internet Explorer 4/5 свойство
clip применяется непосредственно.
2. scheshireCat (...)
Установите ID объектов и добавьте на-
чальную отсекаемую область.
3. <div id=’’cheshireCat’>... </div>
Установите CSS-слои.
4. onMouseOver=”setClip
->(’cheshireCat’,35,320,400, 70)"
Чтобы запустить функцию setClipO,
добавьте обработчик событий. Не за-
бывайте, что в этой функции исполь-
зуется DOM, поэтому ее нужно запус-
кать из события.
Е Границы и залиека элемента (но не его поля)
будут отрезаны вместе с его содержанием.
Е Netscape испытывает трудности с примене-
нием обрезки напрямую ко многим тегам,
включая тег image. Поэтому при примене-
нии обрезки мы рекомендуем вам исполь-
зовать тег <div> или <span>, а затем по-
местить другое содержимое внутрь тегов.
Е Сейчас клипы могут быть только прямо-
угольными, но в следующих версиях CSS
будут поддерживаться и другие формы.
Листинг 14.6. Функция setClip() перерисовывает
границы отсекаемой области объекта
<!DOCTYPE html PUBLIC "-//W3C//0TD XHTML
->1.0 Transitional//EN” ’‘http://www.w3.org/
->TR/xhtmll/DTD/xhtml1-transitional.dtd”>
<html xmlns=’’http://www. w3. org/1999/xhtml">
<head>
<meta http-equiv=’’content-type"
content="text/html; charset=utf-8” />
<title>OHTML & CSS for the WWW |
->Finding an Object’s Visible
->Area</title>
<scnpt language=’’JavaScript”
->type="text/javascript”>
function setClip(objectID, clipTop,
->clipRight, clipBottom, clipLeft) {
var object = document.getElementByld
-> (objectID);
object.style.clip = ’rect(‘ + clipTop +
-> * px ‘ + clipRight + *px ’ + clipBottom
->+ ‘px ‘ + clipLeft +’px)’;
}
</script>
<style type=”text/css” media=’’screen"><!-
#cheshireCat {
position: absolute;
top: 60px;
left: 0;
overflow: hidden;
clip: rect(15px 350px 195рх 50px)
}
-></style>
</head>
<body>
<a onmouseover="setClip(*cheshi reCat', 35,
->320,400,70)" onmouseout="setClip
-> (‘cheshireCat’,15.350,195,50)"
->href=”javascript:void(‘’)”>What is the
->Cheshire Cat smiling about? </a>
<div id="cheshireCat">
<img src="alice31-gif’’ height="480"
->width="379" border=”0" />
</div>
</body>
</html>
Изменение содержимого объекта 13091
Листинг 14.7. Используя функцию writeName(),
можно изменять не только содержимое (например,
видимость слоя), но и реакцию на ввод данных
пользователем, например в поле формы
<!DOCTYPE html PUBLIC "-//W3C//DT0 XHTML
->1.0 Transitional//EN" "http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional.did”>
(html xmlns="http://www. w3. org/1999/xhtml’’>
<head>
<meta http-equiv-’content-type"
->content="text/html;charset=utf-8" />
<title>DHTML & CSS for the WWW |
->Changing the Content After Loading
-></title>
<script language=”JavaScript”
->type="text/javascript"><! -
function writeMameQ {
var userMame = document.getElementByld
-> (‘yourName’).value;
var object = document.getElementByld
-> (‘response’);
object.innerHTML = ‘<h1>Hello <!>' +
->userName + ‘ </i>!</h1><img
->src-'alice09a.gif" alt=''Alice"
->width=”27B” height=”312'' border=”0’7>’
}
// ->
</script>
<style type=”text/css’’ media=”screen’’><! -
hl { color red; font-size: 48px;
->font-family: Georgia, "Times New Roman”,
Times, serif }
-></style>
</head>
<body>
<input type=”text" id=’'yourHame"
->size="30" />
<input type="submit" name=”enter”
->value="Enter" onclick=”writeName()" /
>
<div id="response">
Enter your name and press Enter/Return.
</div>
</body>
</html>
Изменение содержимого
объекта
Другой важный метод внесения измене-
ний в Web-страницу без перезагрузки со-
стоит в том, чтобы использовать объект
innerHTML. Он позволяет вам заменять
или добавлять текущее содержимое в
объекте, включая текст и HTML-теги. Вы
можете изменять не только содержимое
(например видимость слоя), но и реак-
цию на ввод данных пользователем, на-
пример в поле формы (листинг 14.7 и
рис. 14.11,14.12). Эта техника может быть
очень полезной, так как она позволяет
вам динамически обновлять содержимое
без необходимости повторной сортировки
по кадрам. Однако один из недостатков
этой методики заключается в том, что она
не входит в стандарт ЕСМА JavaScript - эта
методика была создана Microsoft для
Internet Explorer 4+. Нужно отметить, что
большинство браузеров, включая Mozilla
(а также Netscape 6+), Opera и Safari, под-
держивают эту методику.
13101 Основы динамических технологий
Изменение содержимого слоя
1. function writeName() {...}
Добавьте в ваш JavaScript функцию
writeName(), которая выполняет поиск в
поле you rName, чтобы получить содержи-
мое и связать его с переменной userName.
Затем функция использует эту перемен-
ную в комбинации с другим текстом и
HTML-тегами, чтобы изменить содер-
жимое объекта response в соответствии
с объектом innerHTML.
2. <input type=”text” id="yourName”
->size=”30” />
Добавьте поле ввода, которое запра-
шивается функцией из пункта 1.
3. onclick=’’writeName()"
Добавьте триггер, чтобы активировать
функцию writeName(). В этом примере
мы используем кнопку ввода, но вы
можете использовать вместо нее любой
другой объект.
4. <div id=”response”>...</div>
Настройте объект, содержимое кото-
рого вы будете изменять (убедитесь в
том, что объект имеет уникальный ID).
Вы можете ввести начальное содержи-
мое для объекта или оставить его пус-
тым и заполнить позднее.
I I Internet Explorer 4+ может также использо-
вать метод innerText, чтобы изменять
1--1 текст (но не добавлять код на страницу).
Правда, этот метод не имеет широкого рас-
пространения.
I I Если вы желаете добавить содержимое в
текущий слой, но не заменять его, при вво-
1---1 де значений вы можете использовать +=
вместо =. Новое содержимое будет добав-
ляться в слой после текущего.
000 DHTML & CSS forth» WWW [Changing th« Со О
Щ1 & Й& £l*
Рис. 14.11. Введите в поле ввода ваше имя
ООО DHTML & CSS for thaWWW [Changing chtCoO
; £ ц to si $1 ,
Hello Alice!
Рис. 14.12. После нажатия клавиши Enter имя
добавляется на страницу путем изменения
содержимого слоя
Управление объектами между фреймами 13111
hc.14.13. Кролик может быть в разных фреймах,
ю DOM находит его и заставляет бежать
йистмнг 14.8. В этом примере (index, html)
издан документ с двумя фреймами, которые
взываются content и controls. Источники этих
фреймов - content.html и controls, html
^ответственно
Управление объектами
между фреймами
Чтобы управлять объектами в одном
фрейме, можно использовать JavaScript
(рис. 14.13). Трудности возникают, когда
вы создаете общую для браузеров DOM,
которой требуется найти путь к элемен-
ту другого фрейма. Это похоже на добав-
ление кода страны в адрес. Вам нужно со-
здать еще одну версию findDDM. js, кото-
рая называется findDOMFrame. js. Функ-
ция не обращается к объекту в том же
самом документе, а ищет объект в доку-
менте другого фрейма. Это означает, что
функции необходимо передать не только
имя объекта, который следует изменить, но
и имя фрейма, в котором данный объект
находится.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Frameset//EN" "http://www.w3.org/TR/
->xhtmll/DTD/xhtml1-frameset.dtd">
(html xmlns="http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type"
->content="text/html;charset=utf-8" />
<title>DHTML & CSS for the WWW |
->Dynamic Control Between Frames</title>
</head>
<frameset rows="*,50">
<frame name-'topFrame” src="content.html"
->noresize="noresize" scrolling="no" />
<frame name=’’bottomFrame"
->src="controls.html" noresize=’’noresize"
scrolling="no" />
</frameset>
</html>
13121 Основы динамичвскихтвхнологий
Управление элементами
в других фреймах
1. index.html
Создайте документ с фреймами, убеди-
тесь, что фреймы с динамическим со-
держанием имеют названия (рис. 14.14).
Названия будут использоваться в DOM,
созданной на шаге 1 (листинг 14.8).
2. content.html
Теперь создайте HTML-документ, со-
держащий объекты, которые требует-
ся контролировать из другого фрейма,
н включите туда позиционированные
объекты, которыми позволяет управ-
лять JavaScript, и их ID (листинг 14.9).
3. controls.html
Создайте HTML-документ, управляю-
щий элементом второго фрейма. Не-
обходимо импортировать код find-
DOMFrame. js, созданный на шаге 1, и до-
бавить DHTML-функцию, которую вы
хотите использовать. Функцию следу-
ет слегка изменить, чтобы ей можно
было передавать имя фрейма, которое
наряду с objectID и withStyle создает
DOM (листинг 14.10). Если теперь вы
загрузите файл index.html в Web-брау-
зер, файлы content.html и control.html
будут загружены между фреймами.
Нижний фрейм (controls) включает
ссылку, которая управляет объектом
whiteRabbit в верхнем фрейме (content).
Рис. 14.14. Набор фреймов устанавливается
из index.html
Листинг 14.9. Создан объект whiteRabbit,
которым можно управлять из текущего или
любого другого фрейма с помощью его D0M
.€1
’DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” “http://www.w3.org
->TR/xhtmli/DTD/xhtml1-transitional. dtd’’>
<html xmlns="http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv="content-type"
->content=”text/html;charset=utf-8" />
<title>DHTML & CSS for the WWW |
->Content Frame</title>
<style type-'text/css" media=”screen"><!-
«whiteRabbit {
position: absolute;
top: 125рх;
left: 350px
)
-></style>
</head>
<body>
<div id=,’whiteRabbit”>
<img src=”alice02.gif" height="300'’
->width="200'’ border="0’' />
</div>
</body>
</html>
Управление объектами между фреймами [зТз]
Листинг 14.10. В controls, html применяется видоизмененная функция moveObject(). Разница
заключается в том, что в функцию передается не только ID перемещаемого объекта, но и название его
фрейма. Затем, чтобы определить местоположение объекта в окне браузера, функция moveDbject()
использует функцию findDOMFrame(), которая была импортирована из файла findDDMFrame. js
'__ • .' . . . Cj.l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR
->xhtmll/DTD/xhtmli-transitional. dtd">
<html xfnlns-"http://www.w3-.org/1999/xhtml”>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8” />
<title>DHTML & CSS for the WWW I Controls Frame</title>
<script language="JavaScript” type='’text/javascript'’><! -
function moveObjectFrame(objectID,frameName,x,y){
var object = top[frameName].document.getElementByldCobjectlD);
object.style.left = x + 'px';
object.style.top = у + 'px';
}
// ->
</script>
</head>
<body>
<a href-'javascript:void(‘’)" onmouseover="moveObjectFrame('whiteRabbit','topFrame’,10,10)”
->onmouseout=”moveObjectFrame('whiteRabbit','topFrame',350,l25)">Run Rabbit, Run!</a>
</body>
</html>
nj"| В этом примере показано, как перемещать
G объекты из фрейма во фрейм. Однако вы
1---1 можете применять любую функцию, управ-
ляющую содержанием фреймов.
Г^П Окно также представляет собой фрейм.
С помощью описанного метода устанавли-
1---1 вают связи между двумя открытыми окна-
ми, если у них есть имена.
Обратите внимание, что фреймы использу-
ют атрибут name вместо id. Атрибут name
опускается в большинстве случаев, но
фреймы все равно будут его использовать.
Кроме того, это будет работать и с пара-
метром IFrames.
роитш
ДШМЖШ
ТПИОПОГНН
15
В главе 14 мы изучили базовые строи-
тельные блоки, которые используются
для конструкции динамического Web-
сайта. Эти блоки включают простые зада-
ния, например, изменение положения и
видимости объекта. Сейчас пришло вре-
мя скомбинировать эти технологии для
того, чтобы не только изменять объекты
единожды, но и добавлять временной
элемент, который позволит модифици-
ровать объекты с течением времени. Бла-
годаря этому мы сможем анимировать
объекты, что повысит интерактивность
Web-сайта. Кроме того, мы рассмотрим
методики изменения окна браузера, кото-
рые позволяют поместить его именно
туда, куда нам нужно.
Повторный запуск
функции
Для создания постоянно изменяющихся
элементов часто бывает необходимо вы-
зывать какую-либо функцию несколько
раз (листинг 15.1). Такой рекурсивный вы-
зов позволяет объектам двигаться или,
чтобы продолжить движение, ожидать
события, которое должно произойти
в окне браузера (рис. 15.1).
Повторный запуск функции [зТй]
Создание рекурсивной функции
1. theDelay=lOOO;
Инициализируйте глобальные пере-
менные:
- theDelay устанавливает промежуток
времени (в миллисекундах) между
двумя запусками функции. Значе-
ние, равное 1000 мс, соответствует
задержке в одну секунду;
- domStyle записывает DOM;
- state сохраняет текущее состояние
видимости объекта, на которое дей-
ствует функция;
- toStop. Если эта переменная равна 1,
то функция перезапускается, чего не
происходит, если переменной при-
сваивается значение 0.
2. function setUpAnnoyingFlash(objectID.
->onOffon)
В сценарий JavaScript добавьте функ-
цию setUpAnnoyingFlash(). Если пере-
менная onOffon равна 1, переменной
toStop присваивается значение 1 (функ-
ция перезапускается). При обращении
к объекту эта функция использует его
ID, который передается в функцию как
переменная objectID. Таким образом
создается DOM. Затем вызывается фун-
кция annoyingFlash(). Если переменная
onOffon равна 0, переменной toStop
присваивается значение 0 и функция
annoyingFlash() не вызывается.
Рис. 15.1. Щелкните по картинке, чтобы остановить ее мигание
13161 Развитые динамические технологии
3. f unct i on an noy i ng Flash () {...}
В JavaScript добавьте функцию anno-
yingFlash(). Она вызывается функцией
setUpAnnoyingFlash() на шаге 2. Если
переменная toStop равна 1, то состояние
видимости изменяется: объект отобра-
жается на экране, если был невидим, и
наоборот. Затем функция перезапуска-
ется при помощи метода setTimeOut ().
Функция annoyingFlash() вызывается
до тех пор, пока переменная toStop не
становится равной D. В этом случае
свойству visibility присваивается зна-
чение visible, и функция больше не
вызывается.
4. ftcheshireCat {...}
Установите ID объектов с помощью
определения position и visibility.
5. onLoad=”setUpAnnoyingFlash
->('cheshireCat',1);”
Чтобы вызвать функцию, созданную на
шаге 2, добавьте обработчик событий
н передайте ему ID того объекта, кото-
рый будет появляться и исчезать на эк-
ране. Также добавьте 1, если хотите,
чтобы объект мерцал, и 0 - в против-
ном случае.
6. <div id="cheshireCat">..</div>
По необходимости настройте ваши
объекты в соответствии с ID (пункт 4).
Е Заметьте, что остановить мигание картин-
ки, щелкнув по ней, можно, только если ее
состояние - visible. Ссылка появляется
на странице лишь в том случае, если изоб-
ражение видимое.
Листинг 15.1. В функции setl)pAnnoyingFlash()
инициализируются переменные, которые затем
используются в функции annoyingFlash().
Последняя вызывается снова и снова,
изображение появляется и исчезает с интервалом
в одну секунду до тех пор, пока пользователь
не щелкнет по картинке
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” “http://www.w3.org/
->TR/xhtml1/DTD/xhtmli-transitional.dtd">
<html xmlns-’http://www.w3.org/1999/xhtmr>
<head>
<meta http-equiv="content-type”
->content=’’text/html; charset=utf-8'' />
<title>DHTML & CSS for the WWW |
->Making a Function Run Again</title>
<script language=’’JavaScript"
->type=”text/javascript"><!-
var theDelay = 500;
var object = null;
var toStop = 0;
var state = null;
function setUpAnnoyingFlash
-> (objectID,onDffon) {
if (onOffon == 1) {
toStop = 1;
object = document.getElementByld
-> (objectID);
object.style.visibility = 'visible';
state = ‘visible’;
annoyingFlash();
. }
else toStop = 0;
}
function annoyingFlash() {
if (toStop == 1) {
if (state == ‘hidden’ )
object.style.visibility = ‘visible’;
else {
if (state == 'visible')
object.style.visibility =
Э'hidden’;
else object.style.visibility =
-> ‘visible’;
}
state = object.style.visibility;
Повторный запуск функции |317,
Листинг 15.1 (окончание)
ЛИСТИНГ-. ^ ...... о]
setTimeout (*annoyingFlash()’,
->theOelay);
}
else{
object.style.visibility = ‘visible';
return,
}
}
// ->
</scnpt>
<style type="text/css" media=”screen’’><!-
tfcheshireCat {
visibility: visible;
position: relative
}
-></style>
</head>
<Dody onload=’’setUpAnnoyingFlash
-> (‘cheshireCat’,1);”>
MAKE П STOP1!!! MAKE IT STOP!!!
-> (Click to make it stop.)
<div id=”cheshireCat”>
<a onclick=”setUpAnnoyingFlash
-> ('cheshireCat’, 0)” href=”#’’><img
->src=”alice24.gif" height="435”
->width=”640’’ border=”0" /></a>
</div>
</body>
</html>
Зачем использовать метод
setTimeOutO?
Если вы перезапускаете функцию с по-
мощью метода setTimeOut(), то у вас
может возникнуть вопрос: «Почему бы
просто не вызвать функцию рекур-
сивно?» Этого не стоит делать по двум
причинам:
при рекурсивном запуске функ-
ции в Netscape 4 возникает ошиб-
ка, которая приводит к сбою в ра-
боте всего браузера;
с помощью setTimeOutO легко
управлять интервалом между за-
пусками функции. Это весьма удоб-
но в том случае, если требуется, что-
бы функция была вызвана повтор-
но через определенное время.
316 Развитые динамические технологии
Анимационные объекты
Когда говорят о динамических технологи-
ях, обычно представляют себе объекты, не
просто перемещающиеся из точки в точку
(см. раздел «Перемещение объекта на за-
данное расстояние» в главе 14), а плавно
передвигающиеся по экрану (рис. 15.2).
Используя рекурсивную функцию (см. раз-
дел «Повторный запуск функции»), мож-
но заставить позиционированный объект
(см. раздел «Тип позиционирования» в гла-
ве 6) плавно передвигаться по экрану (лис-
тинг 14.4).
Анимация объекта на прямой линии
Для прямой линии процесс анимации
очень прост: переместите объект по гори-
зонтали и/или вертикали из начального в
конечное положение. Есть один момент,
который следует учесть: если расстояния
для перемещения объекта по вертикали н
горизонтали различны, вам нужно отре-
дактировать перемещение, чтобы полу-
чить прямую линию (листинг 15.2).
Рис. 15.2. Болванщик быстро передвигается
по экрану
Листинг 15.2. Функция startAnimate() выясняет
начальное левое верхнее положение объекта,
устанавливает D0M и запускает рекурсивную
функцию animateObject(). Она изменяет
положение объекта шаг за шагом до тех пор, пока
он не достигнет конечной точки
<!DDCTYPE html PUBLIC “-//W3C//DTD XHTML
->1.0 Transitional//EN" "http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.Org/l999/xhtml">
<head>
<meta http-equiv="content-type"
->content="text/html;charset=utf-B" />
<title>DHTML &: CSS for the WWW |
->Animating an Object</title>
<script language^'JavaScript"
->type="text/javascript"><!~
var animateSpeed = 5;
var object = null;
var fX = null;
var fY = null;
var cX = null;
var cY = null;
var dX = null;
var dY = null;
var stepX = null;
var stepY = null;
var slope = null;
function initAnimate(objectID,x,y) {
object = document.getElementByld
->(object10);
fX = x;
fY = y;
cX = object.offset Left;
cY = object.offsetTop;
dX = Math.abs(fX-cX);
dY = Math.abs(fY-cY);
if ((dX == 0) || (dY == D)) slope = 0;
else slope = dY/dX;
if (dX>=dY) {
if (cX<fX) stepX = animateSpeed;
else if (cX>fX) stepX =
->- animateSpeed;
if (cY<fY) stepY =
->animateSpeed*slope;
else if (cY>fY) stepY =
->-animateSpeed*slope;}
Анимационные объекты |319|
Листинг 15.2 (окончание)
zS’&Q-ifratt . Листике- ... !• о|
else if (dX<dY) {
if (cY<fY) stepY= animateSpeed;
else if (cY>fY) stepY=
->- animateSpeed;
if (cX<fX) stepX =
->animateSpeed/slope;
else if (cX>fX) stepX -
->-animateSpeed/slope;
}
animateObject()
}
function animateDbjectO {
if ((dX >0) || (dY > 0)) (
object.style.left = Hath.round(cX)
->+ ’px’;
object.style.top = Math.round(cY)
->+ ' px';
cX = cX + stepX;
cY = cY + stepY;
dX = dX - Math.abs(stepX);
dY = dY - Math.abs(stepY);
setTimeout CanimateObjectO’ ,D);
}
else {
object.style.left = fX + ‘px’;
Object.style.top = fY + ’px’;
}
return;}
//->
</script>
<style type="text/css” media=”screen"><!-
«madHatter {
position; absolute;
left: 10px;
top: 10px;}
-></style>
</head>
<body onload=”initAnimat6
->('madHatter',300,250)”>
<div id="madHatter”>
<img src="alice39.gif" height=”163"
width=’’20O” Dorder="0” />
</div>
</body>
</html>
Это можно сделать путем расчета угла
между двумя точками. Далее полученное
значение необходимо использовать, что-
бы определить, насколько далеко нужно
перемещать объект в следующий раз.
Анимация объекта
на прямой линии
1. animateSpeed = 5;
Инициализирует переменные:
- animateSpeed задает задержку в ра-
боте функции. Чем больше значе-
ние, тем медленнее перемещается
объект, и тем более неуверенным
кажется его движение;
- obj ect записывает адрес объекта;
- fX записывает последнее левое по-
ложение объекта;
- fY записывает последнее верхнее
положение объекта;
- сХ записывает текущее левое поло-
жение объекта;
- cY записывает текущее верхнее по-
ложение объекта;
- dX отслеживает перемещение объек-
та влево во время анимации;
- dY отслеживает перемещение объек-
та вверх во время анимации;
- stepX записывает, на какое расстоя-
ние должен перемещаться объект
по горизонтали в каждом шаге ани-
мации;
[3201 Развитые динамические технологии
- sft pY записывает, на какое расстоя-
ние должен перемещаться объект по
вер; икали в каждом шаге анимации;
- sl'H’C' записывает коэффициент
между х и у для смещения пути дви-
жения объекта из начального поло-
жения в конечное положение. Эта
переменная используется для расче-
та значений х и у, при этом объект
перемещается между двумя точками
по прямой линии.
2. function injtAnimatie(objесtID, x,y)
->{
Добавьте в ваш JavaScript функцию
ini tAnimate!). Эта функция использу-
ет ID объекта, чтобы найти его па эк-
ране, задает конечное положение х, у
объем a (fX и fY), рассчитывает теку-
щее положение х, у объекта (сХ и cY),
рассчитывает отклонение для пути
анимации, затем использует результат
для расчета перемещения объекта по
[ориюнтали и вертикали при каждом
шаге анимации. Наконец, эта функция
запускает функцию animateObject().
3. function animateObjecl () {...}
Добавьте в ваш JavaScript функцию
animatoObject!). Эта функция прове-
ряет, не прошел ли объект дальше сво-
его конечного положения, затем пере-
мещает объект в новое положение,
рассчитывает следующее положение
объекта путем добавления переменной
к текущему положению, затем вычита-
ет разницу и заново запускает функ-
цию. Если объект переместился в ко-
нечное положение, он будет немного
смещен назад для компенсации, и рабо-
та функции будет завершена.
4. «madHatter {...}
Настройте ID для вашего анимирован-
ного объекта со значениями положе-
ния и поля слева и сверху.
5. onioad="initAnimate
->('madHatter’, 200, 200)”
Добавьте триггер для активации функ-
ции, которую вы создали в пункте 2.
Передайте функции ID объекта, ко-
торый вы желаете анимировать, и ко-
нечное положение для перемещения
объекта.
6. <div id=’'madHatter”>...</div>
Настраивает объект для анимации.
Анимационные объекты |321,
Рис. 15.3. Безумный Шляпочник бегает по кругу
Листинг 15.3. Скрипт анимации в окружности
рассчитывает положение для отображения
объекта, а также радиус окружности
(на основании заданного радиуса окружности)
<’DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” “http.7/www. w3.org/
->TR/xhtml1/DTD/xhtmL1-transitional.dtd”>
<html xmlns--"http://www.w3.org/l999/xhtml”>
<head>
<meta http-equiv="content-type"
->content=”text/html;oharset=utf-8" />
<title>DHTML Samp; CSS for the WWW |
->Animating an Object</title>
<script language^'JavaScript”
->type=”text/javascriptl’><' -
var animateSpeed = 10;
var object = null;
var cX = null;
var cY = null;
var fX = null,
var fY = null;
var next = null,
var radius = null;
function init Animated role (object ID,
->theRadius) {
Анимация объекта
в окружности
По ряду причин анимацию в окружности
проще закодировать, чем анимацию на
прямой линии, так как вам не нужно от-
слеживать смещение. Вместо этого вам
нужно ввести для формулы радиус ок-
ружности, и скрипт будет использовать
информацию (листинг 15.3 и рис. 15.3).
1. animateSpeed = 10;
Инициализирует переменные:
- animateSpeed задает задержку в ра-
боте функции. Чем больше значе-
ние, тем медленнее перемещается
объект, и тем более неуверенным
кажется его движение;
- object записывает адрес объекта;
- сХ записывает текущее левое поло-
жение объекта;
- cY записывает текущее верхнее по-
ложение объекта;
- fX записывает последнее левое по-
ложение объекта;
- fY записывает последнее верхнее по-
ложение объекта;
- next отслеживает значение, на кото-
рое объект переместился по кругу;
- radius отслеживает расстояние меж-
ду объектом и центром окружности,
вокруг которой выполняется анима-
ция объекта.
II Тиге Дж. К
322 Развитые динамические технологии
2. function initAnimatedrcle
->(objectID, theRadius) (...)
Добавьте в ваш JavaScript функцию
initAnimatedrcle(). Эта функция ис-
пользует ID объекта, чтобы найти его
на экране, рассчитывает текущее поло-
жение х, у объекта (сХ и cY), а также
сохраняет это значение в качестве ко-
нечного положения х, у объекта (f X н
fY). Наконец, эта функция запускает
функцию animateObjectdrcle().
3. function animateObjectdrcle() {...}
Добавьте в ваш JavaScript функцию
animateObjectdrcle(). Эта функция
проверяет, не прошел ли объект пол-
ный круг (в нашем примере это 72
шага по окружности). Если нет, функ-
ция рассчитывает следующее положе-
ние объекта на окружности, перемеща-
ет объект, увеличивает next на 1 и за-
ново запускает функцию. Когда функ-
ция достигает 72, объект возвращается
в начальное (конечное) положение. Это
гарантирует то, что объект точно распо-
ложен (на случай возможных отклоне-
ний); работа функции завершается.
4. tfmadHatter {...}
Настройте ID для вашего анимирован-
ного объекта со значениями положе-
ния и поля слева и сверху.
5. onload="initAnimatedrcle
->('madHatter’, 10)”
Добавьте триггер для активации функ-
ции, которую вы создали в пункте 2.
Передайте функции ID объекта, ко-
торый вы желаете анимировать, и ко-
нечное положение для перемещения
объекта.
6. <div id="madHatteг”>...</div>
Настраивает объект для анимации.
Листинг15.3 (окончание)
8 6 6,,.,ЛИСТИНГ;,:
object - document.getElementByld
-> (objectID);
radius = theRadius;
cX = fX = object.offsetLeft;
cY = fY = object.offsetTop;
next = 1,
animateObjectCircle();
}
function animateObjectCircleO {
if (next < 72) {
var nx = cX + (Math.cos(next *
-> (Math.PI/36)) * radius);
var nY = cY + (Math.sin(next *
-> (Math.PI/36)) * radius);
object.style.left = Math.round(nX)
->+ ‘px’;
object.style.top = Math.round(nY)
->+ ‘px’;
CX = nX;
cY = nY;
next++;
setTimeout (‘animateObjectCircle()',
->animateSpeed);
)
else {
object.style.left = fX + ‘px';
object.style.top = fY + ‘px’;
}
return;
}
//->
</script>
<style type-’text/css" media=’’screen”><!-
tfmadHatter {
position: absolute;
left: ЮОрх;
top: 50px;
}
-></style>
</head>
<body onload="initAnimateCircle
-> (‘madHatter’, 1O)”>
<div id=”madHatter">
<img src="alice39. gif’’ height=”163''
->width="200" border="0” />
</div> </body> </html>
Как сделать объект доступным для перемещения 1323]
Рис. 15.4. Вы можете сами составить
стихотворение?
Как сделать объект
доступным для
перемещения
Еще одна полезная функция - это исполь-
зование мышн: возможность перемещать
окна, файлы и любые объекты на экране,
а также размещать их в новом месте.
В качестве примера этой методики мы
создадим образец стихов для Web-страни-
цы (листинг 15.4 и рис. 15.4). Наверное, на
вашем холодильнике уже висит похожее
стихотворение: каждая буква закреплена
на отдельном креплении, их можно пере-
мещать, чтобы составлять новые слова.
Листинг 15.4. Три функции (picklt. draglt и droplt) позволяют посетителю перемещать объект
по экрану
МВ-.'-'А- у ' ' .....
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Transitional//EN" ‘'http://www.w3.org/TR/xhtml1/
->DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/l999/xhtml”>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8” />
<title>DHTML Samp; CSS for the WWW | Drag and Drop</title>
<script language=’’JavaScript">
<! -
var object = null;
var cX = 0;
var cY = 0;
function initPage () {
document.onmousedown = picklt;
document.onmousemove = draglt;
document.onmouseup = droplt:
I
function picklt(evt) {
evt = (evt} 9 evt : ((window.event) ? event : null);
var objectID - (evt.target) 9 evt.target.id : ((evt.srcElement) ? evt.srcElement.id :
null);
if (objectID.indexOf(‘chip’)!=-1) object = document.getElementByld(objectlD):
if (object) {
object, style, zlndex = Ю0:
cX = evt clientX - object.offsetLeft;
cY = evt.clientY - object.offsetTop;
return,
13241 Развитые динамические технологии
Настройка перемещения
для объекта
1. var object = null;
Инициализирует переменные:
- object записывает адрес перемеща-
емого объекта;
- сХ записывает текущее левое поло-
жение объекта;
- cY записывает текущее верхнее по-
ложение объекта.
2. function initPageO {...}
Добавьте в вашу кодировку функцию
initPage(). Эта функция настраивает
триггеры, которые будут автоматичес-
ки активироваться для событий на стра-
нице (см. раздел «Привязка событий к
объектам» в главе 10).
3. function Picklt(evt) {...}
Добавьте в ваш JavaScript функцию
picklt(). Эта функция схожа с функ-
цией f indObject() - см. раздел «Как оп-
ределить, по какому объекту щелкнул
пользователь» в главе 12. Данная функ-
ция находит ID объекта, по которому
щелкнул пользователь. Если посетитель
щелкнул по одному из объектов, кото-
рые содержат крепление в ID, функция
задает z-индекс объекта как 100 (по-
этому объект будет расположен намно-
го выше других объектов на странице).
В противном случае, функция не вы-
полняет никаких действий.
4. function draglt(evt) • {...}
Добавьте в ваш JavaScript функцию
draglt(). Эта функция будет активиро-
вана каждый раз, когда пользователь
перемещает мышь. Функция не активи-
зируется до тех пор, пока пользователь
не щелкнет по креплению. При щелчке
по креплению функция будет переме-
щать его вместе с курсором мыши.
Листинг 15.4 (продолжение)
9 О -- . ЛиСГМНС.
}
else {
object = null;
return;
}
function draglt(evt) {
evt =’(evt) 9 evt : ((window.event) ?
->event : null),'
if (object) {
object.style.left = evt.clientX -
->cX + 'px’;
object.style.top = evt.clientY -
->cY + ‘ px';
return false;
}
}
function droplt() {
if (object) {
object.style.zlndex = 0;
object = null;
return false;
}
}
// ->
</script>
<style type=’’text/css”><!-
.chip (
color: black;
font: bold 16pt Helvetica, sans-serif;
background-color: #999999;
cursor: move;
position: absolute;
z-index: 0;
layer-background-color: #999999;
I
#chip1 {
top: 123рх;
left: 225px;
#chip2 {
top: 5px;
left: 25px
}
#chip3 {
Как сделать объект доступным для перемещения 1325]
Листинг 15.4 (окончание)
top: 200px;
left: 45px
}
#chip4 {
top: 55px;
left. 55px
)
#chip5 {
top: 150px;
left: 60px
}
ttchip6 {
top: 75px;
left: I25px
}
-x/style>
' </head>
<Dody onload=”initRage()“ bgcolor=”#FFFFFF">
<span id=”chip1" class=”chip”>One</span>
-xspan id=”chip2” class=”chip">Ring
-></span> <span id=”chip3” class=
->”chip">to</span> <span id=”chip4"
->class=''chip”>Rule</span> <span id=
->’’chip5” class=”criip”>Them</span>
-xspan id=''chip6" class=”chip”>All</
span>
</Dody>
</html>
5. function droplt()
Добавьте в ваш JavaScript функцию
droplt(). Эта функция активируется в
том случае, если пользователь отпус-
тит кнопку мыши. Она изменяет z-ин-
декс объекта на 0, а затем переменную
object - на null. При этом перемеще-
ние объекта завершается, и он фикси-
руется в новом положении.
6. .chip {...}
Настраивает стиль, который определя-
ет внешний вид перемещаемых объек-
тов на экране. Убедитесь в том, что для
креплений задан z-индекс, равный 0.
7. #chip1 {...}
Настройте разные ID-селекторы для
всех объектов на экране. Для каждого
объекта задайте начальное положение
слева и сверху.
8. onload=”initPage()”
Добавьте в тег <body> триггер onload
для активации функции initPage().
9. <span id=”chip1” class=”chip”>...
-></span>
Настраивает слои для любого количе-
ства объектов (причем каждый объект
имеет уникальный ID).
I _ i Перемещение объектов с помощью мыши
(j имеет много сфер для применения, напри-
।--* мер, позволяет вам создавать перемещае-
мые области содержания и навигации.
| л | Кодировка перемещения может быть очень
(j чувствительной, поэтому будьте вниматель-
।--* ны при внесении изменений. Проверяйте
результаты, чтобы вовремя отслеживать
возможные ошибки в скрипте.
13261 Развитые динамические технологии
Новое окно браузера
Часто в Web используется такой прием, как
открытие нового окна браузера (рис. 15.5).
Окна используются в разных целях: содер-
жат элементы навигационного управления,
рекламу и другие данные, дополняющие
информацию в главном окне.
При работе с всплывающими окнами при-
меняются следующие функции:
openWindow() открывает новое окно и
помещает его на передний план;
closeWindow() закрывает окно;
toggleWindow() как открывает, так и за-
крывает окна. Если окно закрыто, функ-
ция его откроет и поместит на передний
план. Если окно открыто, функция зак-
роет его.
Открытие и закрытие нового окна
браузера
1. index.html
Создайте новый файл и сохраните его
как index, html. В нем будут содержать-
ся элементы управления, которые ис-
пользуются при открытии и закрытии
всплывающего окна (листинг 15.5).
2. var newWindow=null;
Инициализируйте переменную newWin-
dow, которая является указателем на
объект, соответствующий всплываю-
щему окну. Значение null означает,
что окно не создано.
3. function openWindow(contentURL,
->windowName,windowWidth,
->windowHeight) {...}
В сценарий JavaScript добавьте функ-
цию openWindow(), которая открывает
новое окно, используя следующие па-
раметры:
DHTML* CSS for th» WWW I Optntn; jNtwWi U
'ft & > s ДО 4 < trt
I Window Op»n Control! H O^en:l Close I Toggle
0 0Q DHTM
• New Window
? Cfotf Window
Рис. 15.5. Экран с всплывающим окном
Листинг 15.5. Функции openWindow(},
closeWindow() и toggleWindow() открывают
и закрывают всплывающее окно
ере ЛИСТИНГ^-
<h tml>
<head>
<script>
var newWindow = null;
function openWindow(contentURL,
->windowName,windowWidth,windowHeight) {
widthHeight = 'height=' + windowHeight +
->',width=' + windowWidth;
newWindow = window. open(contentllRL,
->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 + ’.WIDTHS
->+ windowWidth;
newWindow = window.open
->(contentURL,windowName,
->widthHeight);
г
' Листинг 15.5 (окончание)
^ЛИСТИНГ-,,.;. ,,
newWindow.focus()
}
else {
newWindow.close();
newWindow = null;
}
}
</script>
</head>
<body onUnLoad="closeWindow()">
<b>Window Open Controls</b>
<a href="javascript:openWindow
->('newWindow,html',
->'jnyWewWindoW, 150, 50) ">
Open</a> |
<a href="javascript:closeWindow()">
Close</a> [
<a href="javascript:togglewindow
->('newWindow.html',
->'myNewWindow', 150,50)">
Toggle</a>
</body>
</html>
Новое окно браузера p327,
- contentURL является именем HTML-
файла, который нужно поместить
в новое окно;
- windowName представляет собой имя
нового окна;
- windowWidth и windowHeight опреде-
ляют ширину и высоту нового окна.
Метод newWindow. focus() помещает
окно на передний план.
4. function closeWindow() {...}
В сценарий JavaScript добавьте функ-
цию closeWindow(), которая проверяет,
открыто ли окно. Если окно открыто,
функция закрывает его и присваивает
переменной newWindow значение null.
5. function toggleWindow(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 в описании
ссылки.
13261 Развитые динамические технологии
Определение содержания
всплывающего окна
1. newWindow.html
Создайте новый файл и сохраните его
как newWindow.html. Он будет загру-
жаться во всплывающем окне (лис-
тинг 15.6). Как и в любой Web-страни-
це, в этом документе можно помещать
любую информацию.
2. function closeWindow() {...}
В сценарии JavaScript добавьте функ-
цию closeWindow() в только что создан-
ный файл. Если ее запустить, всплываю-
щее окно закроется.
3. onUnLoad-"opener.newWindow=null;"
В тег <body> добавьте обработчик со-
бытий onUnLoad, который присваивает
переменной newWindow значение null,
когда окно закрыто. Эта переменная
сообщает открывающему окну, что
всплывающее окно закрывается.
4. onLoad='window.moveTo(100,100)”
Чтобы при первом открытии перемес-
тить окно в заданную позицию на эк-
ране, в тег <body> добавьте обработчик
событий onLoad (см. раздел «Позицио-
нирование окна браузера»),
5. <а href="javascript:
->closeWindow()”>...</а>
Для вызова функции closeWindow()
определите ссылку, чтобы пользователь
мог закрыть окно.
Листинг 15.6. Файл newWindow. html -
это Web-страница, которая появляется
во всплывающем окне
еее.
> ЛИСТИНГ;
<html>
<head>
<script>
function closeWindowO {
self,close();
}
</SCrlpt>
</head>
<Dody onLoad=”window.moveTo(100,100)"
->onUnLoad="opener.newWindow = null;”>
New Window<br>
<a href=”javascript:
->closeWindow()”>Close Window</a>
</Dody>
</html>
Новое окно браузера [3291
Проблемы, возникающие
при использовании всплывающих окон
Многие разработчики сайтов, приме-
няющие всплывающие окна, недо-
вольны их поведением.
Допустим, вы поместили во всплыва-
ющее окно форму, в которую пользо-
ватель вводит информацию, а затем
эти сведения задействуются в глав-
ном окне. Что произойдет, если
пользователь не ввел данные и не зак-
рыл окно, но вернулся на главную стра-
ницу? Система ожидает информацию,
которая, вероятно, никогда не посту-
пит. Посетитель в это время вносит на
страницу другие изменения, затем
возвращается к всплывающему окну и
вводит нужные данные. Подобные
действия запутывают систему.
Решить эту проблему просто. Если
открытое всплывающее окно может
привести к ошибке, добавьте в тег
<body> документа код
onblur="self.closet);"
Тогда окно закроется, как только посе-
титель покинет его. Окно легко снова
открыть с главной страницы, однако
посетитель не сможет вернуться к не-
му напрямую.
“ZZ-! Обычно предпочтение отдается именно
|| функции toggleWindowt). Но иногда по-
----- лезно использовать и две другие, так как
в некоторых случаях необходимо точно
знать, открыто окно или нет.
I л 1 При создании страниц с фреймами я пред-
(j почитаю применять пункт 4 приведенного
1----1 выше списка. Событие onUnLoad помеща-
ется в тег <frameset>. Когда посетитель
покидает сайт и страница закрывается,
всплывающее окно исчезает.
С
Если вам потребуется открыть несколько
окон, в сценарии может возникнуть ошиб-
ка, поскольку нельзя каждый раз пользо-
ваться переменной newWindow. Вместо это-
го для каждого окна придется добавлять
отдельную функцию (openWindowl(),
openwindow2() и т.д.) и использовать новое
имя (newWindowl, newWindow2 и т.д.)1.
Можно переписать функции так, чтобы в них пе-
редавалась переменная, указывающая на окно, с
которым надо произвести действия. Тогда доста-
точно будет указать количество переменных и
всплывающих окон и при вызове функции пере-
давать ей соответствующую переменную. - Прим,
науч. ред.
13301 Развитые динамические технологии
Позиционирование окна
браузера
При создании интерфейса пользователя
в Web желательно позиционировать окно
браузера на экране посетителя (рис. 15.6).
Это особенно важно, если на вашем сайте
будет открываться много окон и вам нуж-
но установить начальное положение окна
так, чтобы окна не закрывали друг друга
(см. следующий раздел).
При этом вы сможете перемещать окно
из его начального положения на заданное
расстояние (листинг 15.7).
Определение положения окна
на экране
1. functionmoveTo(x, у) {...}
В сценарий JavaScript добавьте функ-
цию moveTo(x, у). Эта встроенная функ-
ция JavaScript сообщает браузеру, что
нужно переместить его левый верхний
угол в точку с указанными координата-
ми (х,у) по отношению к левому верх-
нему углу действительной области эк-
рана (см. раздел «Размеры экрана» в гла-
ве И и рис. 15.7).
Рис. 15.6. Начальное положение окна браузера
на экране
Листинг 15.7. Окно браузера перемещается
в конкретное место на экране или
на определенное расстояние с помощью функций
JavaScript moveTo(x.y) и moveBy(х, у)
- Листинг ,-у^-^То]
<html>
<head>
<b>Window Controls</b> ||
<a href="javascript:moveTo(10,l5)">
Move to 10,15
</a> I
<a href=”javascript:moveBy(10,15)">
Move by 10,!5<br><br>
<img scr=”alice42.gif" width="360"
->height=”4B0" border="0">
</a>
</body>
</html>
Позиционирование окна браузера |~331~|
Рис. 15.7. Окно переместилось в точку
с координатами (10,15)
2. functionmoveBy(dxtdy){...}
В сценарий JavaScript добавьте move-
By(dx,dy). Эта встроенная функция
JavaScript перемещает окно браузера
на указанное расстояние (dx,dy) по
осям X и Y (рис. 15.8).
I Л I Описанный метод больше всего подходит
для перемещения окна, которое было от-
1---1 крыто в первый раз. Это можно сделать,
поместив moveToO или moveByO в обработ-
чик события onLoad в теге <body> (см. сле-
дующий раздел).
Рис. 15.8. Окно переместилось на 10 пикселей
вправо и на 15 пикселей вниз
13321 Развитые динамические технологии
Изменение размеров окна
При открытии нового окна в Netscape
можно установить его начальные разме-
ры (см. предыдущий раздел). В браузерах
Mozilla (Netscape, Firebird, Camino) вы
можете динамически изменить размеры
открытого окна (листинг 15.8 и рис. 15.9).
Обратите внимание: этот раздел отно-
сится только к браузерам Mozilla, Safari
и Opera. Internet Explorer не поддержи-
вает эту функцию.
Рис. 15.9. Начальные размеры окна браузера
Листинг 15.8. Функции changeWindowSizeO, 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);
}
I
</script>
</head.
<body>
Window Size И x
<a href - javascript :changeWindowSize(300, 300); ">
Изменение размеров окна |333]
Листинг 15.8 (окончание)
Resize to 300 by 300</а> |
< а href=javascript:
->magnifyWindow(30,30);">
Increase</a> |
< а href=javascnpt:
->magnifyWindow(-30,-30);">
Decrease</a> I
< a href=javascript:fillScreen(); ">
Fill Screen</a>
CbrXbrXimg scr="alice04. gif
- >width="301" height=”448" border="0">
</body>
</html>
Рис. 15.10. Размеры окна изменились. Текущий
размер - 300x300 пикселей
Изменение размеров окна
1. function changeWindowSize
->(windowWidth,windowHeight) (...)
В сценарий JavaScript добавьте функ-
цию changeWindowSize(). Сначала она
использует метод определения воз-
можностей, чтобы установить, реально
ли выяснить внешнюю ширину окна
браузера. Если ей это удается, значит,
браузер принадлежит к типу Netscape
(см. раздел «Размеры окна браузера»
в главе 11). Затем функция применяет
метод resizeTo() для того, чтобы по-
менять размеры окна на windowWidth
. и windowHeight (рис. 15.10).
2. function magnifyWindow
->(dwindowWidth, dwindowHeight) (...)
В код JavaScript добавьте функцию
magnifyWindowSize(). Сначала она ис-
пользует метод определения возможно-
стей, чтобы установить, реально ли вы-
яснить внешнюю ширину окна браузе-
ра. Если ей это удается, значит, браузер
принадлежит к типу Netscape. Затем
функция применяет метод resizeBy()
для того, чтобы вычесть из размеров
окна или,добавить к иим значения
dwindowWidth ndwindowHeight (рис. 15.11).
Рис. 15.11. Ширину и высоту окна увеличили
на 30 пикселей
13341 Развитые динамические технологии
3. function fillScreen() {..J
В код JavaScript добавьте функцию
fillScreen(). Сначала она использует
метод определения возможностей,
чтобы установить, реально ли выяс-
нить внешнюю ширину окна браузера.
Если ей это удается, значит, браузер
принадлежит к типу Netscape. Затем
функция находит ширину и высоту
действительной области экрана, пере-
мещает верхний левый угол окна в
верхний левый угол экрана и изменяет
размеры окна до размеров действи-
тельной области экрана (рис. 15.12).
4. changeWindowSize(300,300)
В функцию, которую вы хотите ис-
пользовать, добавьте вызов функции
changeWindowSizef) и передайте ей со-
ответствующие параметры. Функцию
легко вызвать из обработчика событий
или же его можно включить в атрибут
href ссылки.
Рис. 15.12. Окно браузера заполняет весь экран
Рис.15.13. С помощью элементов управления
Down и Over страница прокручивается таким
образом, что мы можем видеть разные ее части
Рис.15.14. При щелчке по Over Web-страница
будет пролистана вправо, как показывает
изменение положения полосы прокрутки
Прокрутка окна браузера 13351
Прокрутка окна браузера
Обычно считается, что пользователь про-
кручивает страницу с помощью встроен-
ных полос прокрутки, которые находятся
справа и снизу в окне или фрейме. Вы уже
знаете, как определить положение прокрут-
ки Web-страницы с помощью JavaScript
(см. раздел «Положение прокрутки страни-
цы» в главе 11). Используя простой прием
JavaScript, можно установить горизонталь-
ную или вертикальную прокрутку страни-
цы (листинг 15.9, рис. 15.13 и 15.14).
Добавление прокрутки
Web-страницы
1. function scrollPageTo(x,у) {...}
В сценарий JavaScript добавьте функ-
цию scrollPageTo(). Если браузер со-
вместим с Internet Explorer, то функ-
ция применяет свойства scrollLeft и
scrollRight, чтобы прокрутить страни-
цу в точку с координатами (х,у). В про-
тивном случае используется встроенная
в Netscape функция scrollTo().
2. #overHere {...}
С помощью значений position, left и
top установите ID объектов. В этом при-
мере определено два объекта: один в са-
мой нижней части страницы, другой -
справа. Теперь можно применить функ-
цию scrollPageTo().
3. <а href=”javascript:scrollPageTo
->(0,1990)">.. .</а>
Чтобы запустить функцию sc roll Раде-
То(), определите ссылку и передайте
функции координаты того места, куда
требуется прокрутить страницу. Пом-
ните, что нет необходимости приме-
нять обработчик событий, чтобы запу-
стить эту функцию, так как она не об-
ращается к DOM.
13361 Развитые динамические технологии
ЕВ этом примере страница прокручивается
после того, как пользователь совершит ка-
кое-либо действие. Используя другой обра-
ботчик событий (например, onLoad), можно
сделать так, что страница будет прокручи-
ваться и без непосредственной команды
пользователя, однако при этом нужно быть
осторожным: если страница вдруг начнет пе-
ремещаться из стороны в сторону, это может
запутать или даже заставит волноваться по-
сетителя вашего сайта.
Г^П В Netscape 4 (Windows) и Netscape 6 (все
версии) есть особенность, из-за которой
।1 описанный метод не работает во фрейме со
скрытыми полосами прокрутки (scrol-
ling=’ по"}. В этом случае не только уби-
раются с экрана полосы прокрутки, но и
весь фрейм невозможно прокручивать
даже с помощью JavaScript.
Листинг 15.9. Функция scrollPageToO передвигает
Web-страницу по вертикали и/или горизонтали
в зависимости от желания пользователя
<html>
<head>
<script>
var isIE = 0;
if (navigator.appName.indexOf('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">
tfoverHere {
position, absolute:
Листинг153 (окончание)
,eaa.
;.ЛИСГМНГ>;;-;
top: 1Opx;
left: 2000px;
width: ЮООрх;
z-index: 100;
visibility: visible; }
tfdownHere {
position: absolute;
top: 2000px;
left: Юрх;
height: ЮООрх;
z-index: 100;
visibility: visible; }
</style>
</head>
<body>
<a href-"javascript:scrollPageTo
->(0,1990)">v Down</a> |<a href=
->”javascript:scrollPageTo(1990,0)"
->0ver > <br style="clear:both">
-Ximg scr="alice25.gif" width=“300“
->height=”228" border="0"x/a>
<div id="downHere”>
<a href="javascript:scrollPageTo
->(0,0)">" Back to Top</a>
<pxa href="javascript:scrollPageTo
->(0,0)"><img scr="alice27.gif"
->width="200" height="1B0”
->border="0"x/ax/p>
</div>
<div id-"overHere">
<a href="javascript:scrollPageTo
->(0,0)">> Back to Left</a><br
->style="clear:both">
<pXimg scr="alice26.gif" width="l79"
->height="200" border="0''x/p>
</div>
<br clear=”aH">
</body>
</html>
дшмжш
ТШ10П0ГИИ (й
16
В предыдущих главах мы рассказали о
том, как изменять специфические атрибу-
ты CSS для получения специальных эф-
фектов, например, для того, чтобы отобра-
жать и скрывать объекты, а также переме-
щать их по экрану. Вы можете изменять
абсолютно любые атрибуты CSS (см. при-
ложение А). В результате вы можете дина-
мично управлять CSS в окне браузера пу-
тем изменения стилей. Подобные измене-
ния будут отображаться немедленно бла-
годаря динамическим технологиям CSS.
В течение многих лет возможности дина-
мических технологий CSS ограничивались
тем, что в Netscape 4 почти все они не ра-
ботали. В настоящее время Netscape 4 со-
ставляет менее одного процента на рынке
браузеров, а это значит, что для Web-ди-
зайнеров открываются новые перспективы
(разумеется, если вы не уверены в том, что
большую часть ваших пользователей со-
ставляют те, кто работает с Netscape 4).
Сначала мы поговорим о том, как работать
со стилями, которые были настроены для
определенного браузера или операционной
системы.
13361 Динамические технологии CSS
Настройка стилей для
операционной системы
или браузера
Между операционными системами MacOS
и Windows существует ряд несоответствий,
которые зачастую создают излишние про-
блемы Web-дизайнерам, использующим
CSS при создании сайтов. Это касается цве-
товой палитры и размеров шрифтов. На
самом деле проблема заключена не в CSS,
а в том, как операционные системы опреде-
ляют размеры шрифтов и цвета.
Несмотря на то, что с помощью DTD-
файла вы можете заставить браузер под-
держивать совместимость и решить мно-
гие проблемы (см. главу 1 «Настройка
DTD»), ряд трудностей может сохранить-
ся. Особенно большое значение совмести-
мость имеет в том случае, если вам нужно
добиться совпадения размеров шрифтов,
цветов и расположения объектов.
Не вдаваясь в технические подробности
и не углубляясь в историю, отмечу, что ос-
новная проблема заключается в том, что
в Windows шрифт отображается более
крупным, а цвета - более темными, чем
в Мас. Дизайн, разработанный для Мас, мо-
жет выглядеть идеально, но при загрузке
в Windows вместо превосходного дизайна
на экране появятся гигантские шрифты
и темные цвета.
Кроме того, дизайн объектов, которые
были точно размещены в Internet Explorer,
может быть искажен всего несколькими
пикселями в Netscape.
Используя JavaScript и CSS-файлы, ориен-
тированные на каждую ОС, вы можете до-
биться правильного отображения шрифтов
и цветовой гаммы в операционной системе
посетителей вашего сайта (рис. 16.1-16.3).
Рис. 16.1. Так выглядит страница, загруженная
при помощи Internet Explorer 5 для Windows
Рис. 16.2. Та же самая страница при загрузке из
Internet Explorer 5 для Мас (без корректировки) -
шрифт мельче и слишком бледный
Настройка стилей для операционной системы или браузера 13391
.,606 -ОНГМИСМ <!И ем чип» 1 СИ F0'
Рис.16.3. Таже самая страница, загруженная при
помощи internet Explorer 5 для Мас, но уже
подкорректированная. Увеличился размер
шрифта, цвет стал более темным
Листинг 16.1. Файл default.css содержит стили
Web-страницы, которые будут использоваться
по умолчанию
Ааен-ЛтН-?.- : .....ЛИСТИНГ - <=>]
copy {
color: вссЗ.
font: 20px/32px "Times New Roman',
->Georgia, Times, serif;
width: 500px
body {
background-color #fff
}
Определение CSS для
операционной системы посетителя
1. default.css
Создайте внешний CSS-файл, который
содержит стили, используемые на Web-
сайте, и сохраните его под именем de-
fault.css (листинг 16.1). Этот файл на-
прямую присоединяется к каждой Web-
странице (см. шаг 4). Так как Internet
Explorer для Windows является в настоя-
щее время самым популярным браузе-
ром, постарайтесь оптимизировать CSS
именно для этого браузера.
2. mac. css
Создайте второй файл и сохраните его
под именем mac.css (листинг 16.2). Эта
версия дополняет файл default.css и
адаптирует CSS вашего сайта для
пользователей Мас. Нет необходимо-
сти вводить повторно все определе-
ния в default.css.
3. netscape.css
Создайте третий файл CSS и сохраните
его как «netscape.css» (листинг 16.3).
Эту версию следует использовать для
настройки определений параметра
default.css, чтобы с ними могли рабо-
тать пользователи Netscape. Как прави-
ло, это требует настройки положения и
размеров объектов.
Листинг 16.2. Стили в файле mac.css дублируют
аналогичные из файла default.css
Листинг 16.3. Стили в файле netscape.css
дублируют аналогичные из файла default.css
10^8,....;.....• . .ЛИСТИНГ; . : . о!
•сору {
color: ffbb2,
font: 23рх/35рх.
width' бООрх
}
вое Листинг о I
. сору width бООрх; }
13401 Динамические технологии CSS
н
4. clink href="default.css" rel=
->"styleSheet" type="text/css">
В теге <head> HTML-документа (в при-
мере используется файл index.html, см.
листинг 16.4) привяжите версию таб-
лицы стилей, которая применяется по
умолчанию.
5. if((navigator.appVersion.indexOf
->( Mac’ )> =1)){...}
После тега <link> напишите строку
JavaScript, чтобы определить операцион-
ную систему, в которой работает брау-
зер. Если это Мас, то тег <1 ink> для Мас
уже добавлен к странице при помощи
JavaScript. Этот второй стиль изменяет
установки таким образом, чтобы они
больше подходили под операционную
систему Мас. После добавления тега
<11 n к> в пункте 4 добавьте в кодиров-
ку JavaScript, который проверяет, яв-
ляется ли браузер совместимым с Мас
или Netscape (например, Mozilla или
Firebird). Если да, тег <link> на версию
CSS для Мас или Netscape «записыва-
ется» на странице и будет применять-
ся для исправления установок CSS по
умолчанию.
Хотя класс сору в Мас-версии CSS не содер-
жит гарнитуры шрифта, текст по-лрежнему
отображается как Times. Так почему же оп-
ределение класса сору в файле default.css
сменяется определением из mac.css? Тер-
мин «каскадный» в понятии «каскадные таб-
лицы стилей» означает возможность пере-
крывать определения, даже если они взяты
из разных источников.
Листинг 16.4. JavaScript определяет, используется
ли на компьютере MacOS. При положительном
ответе загружаются другие CSS-стили,
помогающие осуществить коррекцию
<head>
clink href="default.css"
->rel="styleSheet" type=”text/css">
<script language="JavaScript">
if ((navigator.appVersion.indexOf("Mac")
->!= -D) {
document.write('clink href=”mac.css"
->rel=”styleSheet" type=”text/css">'); }
</script> /
</head>
<Dody>
<p class="copy">Oown, down, down...
-></p>
<p class="copy">Presently she began
->again...</p>
</body>
</html>
Описанный прием использования JavaScript
удобен для достижения различных результа-
тов. Если потребовалось предоставить посе-
тителю возможность выбирать таблицу сти-
лей для вашего сайта, вы должны ввести не-
которую переменную, чтобы определить, ка-
кая таблица стилей загружена. Приведенный
код дает как посетителю, так и разработчику
значительно больший контроль над отобра-
жением страницы, и, таким образом, Web-ди-
зайнерам нет необходимости создавать от-
дельные страницы для каждой из версий.
Настройка стилей для операционной системы или браузера 1341 ]
Designing With Cascading
Style Sheets
Рис. 16.4. Так должна выглядеть страница
в Netscape
Рис. 16.5. Так будет выглядеть страница при
изменении размеров, если не исправить ошибку
реализации CSS. Для отображения страницы
используются установки браузера по умолчанию
Исправление CSS в более ранних
версиях Netscape
Рассмотрим наиболее часто упоминаемую
ошибку Netscape в реализации CSS. Когда
посетители изменяют размеры окна брау-
зера, все CSS-форматирование, созданное
с использованием внешнего CSS-файла
(который импортировался при помощи
тега <link>), внезапно исчезает, будто при-
соединенная таблица стилей никогда ранее
не существовала. Однако, если посетитель
перезагрузит эту страницу, форматирова-
ние вновь появится (рис. 16.4 и 16.5). Та-
кая ошибка вполне могла бы отбить
у посетителей желание заходить на ваш
сайт, особенно если они и не подозревают,
что нужно просто перезагрузить страницу.
Как проверить, что страница была пере-
загружена после того, как изменился ее
размер? Все очень просто - за этим про-
следит браузер, если вы, конечно, скажете
ему об этом (листинг 16.5).
Перезагрузка страницы
после изменения ее размеров
1. if (document. layers) {...}
В теге <script> в заголовке <head> ва-
шей HTML-страницы введите код, ко-
торый определяет, использует ли брау-
зер DOM слоя. В случае утвердительно-
го ответа программный код выведет те-
кущие значения высоты (innerHeight) и
ширины (innerWidth) видимой области
страницы (см. раздел «Видимая область
объекта» в главе 12).
13421 Динамические технологии CSS
2. function reloadPage(){...}
Добавьте функцию reloadPage() в код.
При загрузке страницы она сравнива-
ет текущие значения ширины и высо-
ты окна со значениями, определенны-
ми на шаге 1.
3. onresize = reloadPage;
Присвойте событию onresize значе-
ние функции reloadPage. Если посе-
титель изменяет размеры окна, в ко-
тором отображается страница, то брау-
зер перезагружает ее, восстанавливая
форматирование CSS.
I Л I Лучше написать этот код в отдельном фай-
I (j I ле с расширением ,js, а затем присоеди-
1---1 нить его к каждой странице сайта, приме-
няющего CSS.
Листинг 16.5. Этот JavaScript определяет использо-
вание браузера Netscape 4 и загружает CSS-стили
^.ЛИСТИНГ:. .1 Q
<html>
<hr-ad>
1 ieta http-equiv-’content-type"
->content=”text/html;charset=iso-8859-
T’>
<title>DHTML for the WWW |
->CSS Bug Fix</title>
<scriptx! -
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>
<hl>Designing with Cascading Style
->Sheets</hi>
<p class=''copy’'>Whenever you type in a
section title...</p>
</body>
</html>
Определение значения собственности для стиля 13431
Рис. 16.6. появляется предупреждение с
сообщением о том, чему равно значение
параметра font-size для objecti
Листинг 16.6. Функция f 1 ndSty 1 eValue()
определяет параметры CSS
<f DDCTYPE html PUBLIC '*-//W3C//DTD XHTML
->1.D Transitional//EN” "http://www.w3.org/
->TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns='’http://www.w3.org/i999/xhtml”>
<head>
<meta http-equiv=”content-type"
content=’’text/html; cha rset=utf-8" />
<title>DHTML & CSS for the WWW |
->Finding an Dbject’ s Set Style
->Value</title>
<scnpt language=’’JavaScript”
->type=”text/javascript’’><! -
function findStyleValue(objectID,styleProp,
->IEStylsProp) {
var object = document.getElementByld
-> (objectID);
if (object.currentstyle) return object.
->currentStyle[IEStyleProp]
else if (window.getComputedStyle) {
compStyle = window.getComputedStyle
-> (object,’’);
return compStyle.getPropertyValue
-> (styleProp);
function displayStyle(objectlD) {
objectFontSize = findStyleValue(objectID,
->’font-size’,’fontSize’);
alert(objectFontSize);
Определение значения
собственности для стиля
Хотя JavaScript можно использовать для
определения текущего значения парамет-
ра CSS с помощью D0M, это можно сде-
лать только после того, как значение соб-
ственности для стиля было задано в CSS.
Другими словами, JavaScript ие может на-
прямую читать стили, указанные в табли-
це стилей. В предыдущих разделах книги
мы лишь показали, как инициализиро-
вать стили в JavaScript (см. раздел «Состоя-
ние видимости объекта» в главе 12 для
примера).
Существует метод, который позволяет вам
напрямую запрашивать стили (рис. 16.6).
Из-за разницы между браузерами этот
метод может оказаться неэффективным.
Самая большая трудность заключается в
том, что Netscape и Internet Explorer часто
будут показывать одинаковые результа-
ты, но в совершенно разных форматах.
Например, Netscape всегда будет выдавать
значение по цвету в RGB (независимо от
того, какие единицы использовались для
определения значения собственности сти-
ля). Internet Explorer будет выдавать такое
значение по цвету, которое было задано в
таблице стилей. Есть еще один недоста-
ток: данный метод не будет работать в
Safari или Opera.
Все же в некоторых ситуациях это реше-
ние может оказаться единственным (лис-
тинг 16.6).
13441 Динамические технологии CSS
Определение значения
собственности, заданного
в таблице стилей
1. function findStyleValue(objectID,
->sty 1еРгор, lEStyleProp) {...}
Добавьте на вашу Web-страницу функ-
цию f indStyleValue(). Этот скрипт ис-
пользует для адресации объекта пере-
данную ей переменную оbjectID, затем
с помощью метода currentstyle
(Internet Explorer) или g et Р г о ре г tуVa1 и е
(Netscape) возвращает значение для
стиля. Обратите внимание, что вы
передаете две различные версии соб-
ственности для запрашиваемого стиля.
Это происходит потому, что Netscape
использует в качестве собственности
для стиля стандартный формат CSS, а
Internet Explorer - имя стиля в инфор-
мации, полученной JavaScript.
2. function displayStyle (objectID)
-> {..}
Добавьте на вашу Web-страницу функ-
цию, которая вызывает функцию
findStyleValue() и передает ей ID
объекта, который вы желаете запро-
сить. Также функции передается имя
стиля в стандартном формате CSS (для
Netscape) и формате JavaScript (для
Internet Explorer). Например, вместо
font-size вы будете использовать
fontSize.
3. tfobjecti {...}
Настройте объект для запроса.
4. displayStyle()
Добавьте вызов функции display-
Style(), который передает ей ID запра-
шиваемого объекта.
Листинг 16.6(окончание)
// ->
</script>
<style type=”text/css" media=”screen”><!-
#objecti {
font-size: 24px;
color: #ffOOOO;
position: relative;
width: ЗООрх
}
-></style>
</head>
<body>
<div id=”objectl”>Test</div>
<a href="javascript:displaystyle
-> (‘object!’)">Click Me</a>
</body>
</html>
Добавление или изменение определения стиля 13451
Листинг 16.7. Функция addStyleDefO изменяет
стили в определении конкретного объекта в окне
браузера или добавляет их в это определение.
Если посетитель наведет указатель мыши
на фразы «Eat Ме» и «Drink Ме», размер текста
увеличится или уменьшится
гЛИСТИНС,
<!D0CTYPE html PUBLIC “-//W3C//DTD XHTML
->1.D Transitional//EN” "http://www.w3.org/
->TR/xhtmli/DTD/xhtmli-transitional.dtd">
<html xmlns="http://www.w3.org/l999/xhtml”>
<head>
cmeta http-equiv=”content-type"
->content=”text/html;charset=utf-8” />
<title>DHTML & CSS for the WWW |
->Adding a Definition</title>
<script language=”JavaScript”
->type="text/javascript”><!-
Добавление
или изменение
определения стиля
Используя CSS, определения (рис. 16.7)
можно устанавливать, а с помощью Java-
Script - изменять (рис. 16.8). Допустимо
изменять или добавлять любое CSS-свой-
ство, указанное для какого-либо объекта
на экране. По крайней мере, такая функ-
ция существует и в Internet Explorer, и в
Netscape 6 (листинг 16.7).
Дав DHTWLACSSforthoWWWjAAMngaEO
jtlj» * х <» я*
Eat Me l L Drink Me
В в в DHTML & CSS for the WWW | Adding a CO
£ *» * a (itf ф______________________ *
Eat J^Ie I Drink Me
'Curiouserand curiouser!’ cried Alice
(she was so much surprised, that for the
moment she quite forgot how to speak
good English); now I’m opening out like
the largest telescope that ever was!
Good-bye, feet!’ (for when she looked
down at her feet, they seemed to be
almost out of sight, they were getting so
far off). 'Oh, my poor little feet, 1
wonder who will put on your shoes and
stockings for you now, dears? I’m sure I
shan’t be able! I shall be a great deal too
far off to trouble myself about you: you
must manage the best way you can: -but
I must be kind to them,’ thought Alice,
'or perhaps they won’t walk the way 1
want to go! Let me see: I’ll give them a
new pair of boots every Christmas.’
Jocumtnt: Done 0
Fnc.16.7. До того как указатель мыши пройдет над
фразой «Eat Ме», размер шрифта останется
маленьким
Document: pone 0
Рис. 16.8. После того как указатель мыши прошел
над фразой «Eat Ме», размер шрифта увеличился
с 4 до 18 пикселей
13461 Динамические технологии CSS
Как изменить определения
1. function changeStyle(objectID,
->styieName, newval) {...}
В сценарий JavaScript добавьте функ-
цию changeStyle(). При обращении к
объекту она использует его ID, кото-
рый передается в функцию как пере-
менная objectID. Таким образом со-
здается DOM. Затем функция при по-
мощи DOM заменяет стиль, который
она получила как styleName, на новое
значение (newVal).
2. «object 1 {. }
Установите ID объектов с помощью
CSS-свойств, которые вы хотите изме-
нить.
3. <div id="objecti”>...</div>
Установите CSS-слои.
4. onmouseover='’addStyleDef
->(‘object1', ‘fontSize’, ‘18рх’);”
Добавьте триггеры для активации функ-
ции addStyleDef (). Передайте функции
ID адресуемого объекта, а также зна-
чение собственности стиля для измене-
ния и новое значение. Обратите внима-
ние, что имя стиля использует информа-
цию JavaScript.
| Л | Заметьте, что мы поместили триггер в тег
|j <div>. Помните, триггеры необязательно
‘1 должны вводится только в тегах <link>, Для
большинства браузеров события могут акти-
вироваться из любого объекта на странице.
ГТ^”| Имена стилей в CSS состоят из двух или
(j более слов, разделенных дефисом (font-
‘1 size). Чтобы использовать имена в дина-
мических CSS, нужно перевести их в имена
стилей JavaScript (fontSize).
Листинг 16.7 (окончание)
function addStyleDef(objectID,styleName,
->newVal) {
var object = document.getElementByld
- > (objectID);
object.style [styleName] = newVal;
}
// ->
</script>
<style type=”text/css” media=”screen’’><1-
#objectl {
font-size: 4px;
position: relative;
width: 3D0px;
}
tteatMe {
font-size: iBpx;
margin-right: 20px;
position: relative;
}
ttdrinkMe {
font-size: IBpx;
margin-left: 20px;
position: relative;
}
-></style>
</head>
<body>
<span id=”eatMe” onmouseover=”addStyleDef
- > (' object!’, ’ fontSize’, ’ 18px’); ’’
-»Eat Me</span> | <span id="drinkMe"
->onmouseover=”addStyleDefCobjectl’,
- >'fontSize’,’4px’);”>Drink Me</span>
<div id="objectl”>
’Curiouser and curiouser!’ cried
->Alice...</div>
</body>
</html>
Добавление или изменение определения стиля 13471
Добавление или изменение стилей
в Internet Explorer
Click Me
Down, down, down Would the tall weierconw to an
end’ ’I wonder how num miles fvc fallen by this ।
time." she said aloud 'I must be getting somewhere I
near the centre ul the earth Let me see. that would be |
thur thousand miles ifow n. I think-’ (for. sou see. I
.-Mice had learnt .several things of this sort in her >
lessons in the schuolrixtm. and though this w as not a ।
VERY good oppoitunity lot -.howing offher !
know ledge, as there was no one to listen io her. still it !
was good practice to say it over) ’-yes, that’s about the i
right distance-hut then 1 wonder what Latitude or
Longitude I’ve got to’’’ (Alice had no idea what
Latitude was, 01 Longitude either, but thought they
were nice grand w ords to say.)
Ф Inttrn»» gon»
Хотя метод изменения стилей, представ-
ленный в предыдущем разделе, будет ра-
ботать в большинстве современных брау-
зеров (Internet Explorer 4+, Netscape 6+,
Safari и Opera), Internet Explorer также
может добавлять или изменять стили пу-
тем добавления нового правила в суще-
ствующий список стилей (рис. 16.9 и
16.10). Сначала вам нужно передать тегу
<style> ID, который преобразует его в
объект. Затем с помощью JavaScript вы
можете получить доступ к таблице сти-
лей, а с помощью DOM - доступ к свой-
ствам стиля (листинг 16.8).
Рис. 16.9. До того как пользователь щелкнет
по ссылке, в окне используются значения,
установленные на странице по умолчанию
(черный текст на белом фоне)
Имена в JavaScript
Имена объектов в JavaScript обладают
некоторыми особенностями. Здесь
нельзя использовать точки, дефисы,
пробелы или другие разделители. Вме-
сто этого сложные слова записывают-
ся следующим образом: все буквы
должны быть строчными, кроме пер-
вой буквы слов, стоящих за первым
словом. CSS-свойство font-size пре-
образуется в fontSize.
Я рекомендую придерживаться этих
правил при присвоении имен функ-
циям и переменным JavaScript, а так-
же CSS-классам и ID. Это значитель-
но облегчит вашу работу.
Рис. 16.10. После щелчка по ссылке вступает
в действие набор правил, установленный для тега
<body> (белый текст на красном фоне)
1348 Динамические технологии CSS
Добавление нового правила
1. function addARule(selector,definition)
В сценарий JavaScript добавьте функ-
цию addARu 1е(). Она привносит в таб-
лицу стилей, которая будет определена
на шаге 2, новое правило. С этой целью
используется имя селектора, для кото-
рого добавляется правило (см. «Типы
HTML-тегов» в главе 1), и определения,
которые вы хотите применить к данно-
му селектору.
2. <style id="myStyles”>...</style>
В заголовок документа добавьте тег
<sty 1 е>, даже если вы не устанавливае-
те начальные правила, и присвойте ему
ID, который функция из шага 1 будет
использовать при обращении к табли-
це стилей.
3. nClick="addARule('body', 'background-
->color:red;color:white’); "
Чтобы вызвать функцию addARule(),
созданную на шаге 1, добавьте обра-
ботчик событий. Передайте функции
название селектора, в который требу-
ется добавить правило, и определения,
которые необходимо приписать этому
правилу. 1
Один из недостатков этого метода заключа-
ется в том, что, в соответствии со специфи-
‘1 кадиями XHTML и CSS, теги стилей не дол-
жны иметь ID-атрибутов. Это может приве-
сти к тому, что ваша Web-страница даст
сбой при попытке совместить HTML и CSS.
Листинг 16.6. Функция addStyleDefIЕ()
добавляет новое правило CSS в таблицу стилей,
которая называется myStyles
<’DDCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” “http://www.w3.org/
->TR/xhtml1/DTD/xhtmli - transitional. dtd’’>
<html xmlns=”http://www.w3.org/l999/xhtml">
<head>
<meta http-equiv=’’con tent-type”
->con ten t=’’text/html; charset=utf-8’’ />
<title>DHTML & CSS for the WWW |
->Adding a New Rule</title>
<scnpt language="JavaScript”
->type=’’text/javascript’’><! -
function addStyleDefIE(selector,definition)
{
document.styleSheets.NyStyles.addRule
-> (selector,definition)
}
// ->
</script>
<style id=”HyStyles"><!-
hi {
font-size: 24pt
}
body {
color: gray
}
-></style>
</head>
<body>
<hixa onclick=”addStyleDefIE
-> ('body’,’background-color:red:
->color: white’)” href=”tt”>Click
->Me</a></hi>
<p>Down, down, down. Would the fall
-><i>never</i> come to an end!</p>
</body>
</html>
ШДА...........
й > •; (J) ч й
: Eat Me I -___ __________
Рис.16.11. До того как указатель мыши пройдет
над фразой «Drink Ме», текст будет отображаться
черным цветом, а его размер останется
небольшим, так как используется класс copyTiny
tfift________, p»mc.«wtotM.wwwiQ»Mtfa«»q<>»........ _ ....О.
®_<> ’ » '4 (Ю « __ __________________ * 1
... I Drink Me
turicuser and i urnmsur: cued Alice (she was su much
surprised, that for the moment she quite ioigot how to speak
good f'.ngbsh). iviv. I m opening out luce the largest telescope
that ever was! Good b\c feet: (lor when she looked down at
krteet. thev seemed to be almost out ot siehl. they weie
igeuiru; .so tar oil) tJb.nn poor little feet. I wonder who will
put tin vourshrx's and stockings tor you now1, dears’ 1 in sure
/shan t be able I shall be a great deal too far off to trouble
myself about you you mint manage the best wav vou can.
'-but I must be Kind to ihcrn. thought Alice, er perhaps they
wont walk the u.iv 1 want to co: Let me see Hi give them a
Ciair ot Iwits every Christmas
J*« ______________________L_______ „— $4
Рис. 16.12. После того как указатель мыши
прошел над фразой «Drink Ме», шрифт стал
красным, его размер увеличился, так как класс
переименовали в соруниде
Изменение CSS-класса объекта 13491
Изменение CSS-класса
объекта
В возможности изменять и добавлять от-
дельные определения есть много полезного
(см. предыдущий раздел). Но на измене-
ние нескольких определений тратится
много времени. Вместо этого можно мо-
дифицировать сразу несколько определе-
ний (рис. 3,6.11 и 16.12). Данную задачу
нетрудно решить, изменив весь CSS-класс
объекта (листинг 16.9).
Изменение CSS-класса объекта
1. function setClass(objectID,newClass)
->{.J
В сценарий JavaScript добавьте функцию
setClass(). При обращении к объекту
она использует его ID, который передает-
ся в функцию как переменная objectID.
Таким образом создается DOM. Затем
функция с помощью DOM изменяет имя
класса, применяемого к объекту, на но-
вое (newClass).
2. ttobjecti {...}
Установите ID слоев с помощью лю-
бых стилей по вашему желанию.
3. . copyTiny {...}
Определите классы, которые будут при-
меняться к объектам.
4. onmouseover="setClass(’objectl',
->‘соруНиде’);”
Чтобы вызвать функцию, созданную
на шаге 1, добавьте обработчик собы-
тий. Передайте функции ID объекта, к
которому вы хотите обратиться, и на-
звание стиля, который требуется при-
менить к объекту.
5. <div id=”object1">..,</div>
Установите CSS-слои.
350 Динамические технологии CSS
Листинг 16.9. Функция setClass()
переопределяет CSS-класс конкретного объекта
в окне браузера
SO 8 Листинг ~ о|
<iDOCTYf'i: г.ггг,’. PUBLIC "-//W3C//DTD XHTML
->1 D Т; irisit-io:'31//EN" "http //ww w3 огд/
->TR/xh ‘ iu 11/D ГР /xhtml!-transitional. dtd">
xhtml x"ln$ l-l'p //www.w3 org/i999/xhtml">
<head>
<motlit t r>-rq4iv-”content-type"
->co'.' unr -- h.-xt/html. charset=uIf-8" />
xtir.-Dll i ML &, CSS for the WWW |
-digging a Class</title>
1 ipi l,tnguage= 'JavaScript"
- ’ype ' t. xt/]avascript"><!-
function setClass(objectID.newClass) {
var object = document.getElementByld
-> (objectID);
object.className = newClass;
}
// -
</SC: Lpl
<styb- type-'icxt/css" mcdia="scrcen"><!-
ffobjectl (
position: relative
}
fleatMe :
m.arqin-r ight 20px,
posit ion. । dative
}
ttdrinkM’ {
marqin-Lert 20px;
pos11 ion n lative
}
.copyTiny {
color: black;
font-size: 4px;
position: relative;
width: ЗООрх;
}
.copyHuge {
color: red;
font-size: 24px;
position: relative;
width- 600px;
}
tiny {
Листинг 16.9 (окончание)
ВОЛ . ЛИСТИНГ x, .. x.x.-'o]
color- red;
font-size- 4px:
position relative;
}
.huge {
color black,
font-size. 18px:
position relative;
}
-></$tyle>
</head>
<body>
<span id-'eatMe’’ class-’huge” onmouseover
->="setclass('object!’, ’ copyHuge’);
->setClass(1drinkMe’huge’);this.
->className = ’tiny’;">Eat Me</span> |
-xspan id="drinkMe" class-’tiny”
->onmouseover=”setClass('object!'.
->'copyTiny’);setClass(’eatMe’,’huge’);
->this className = 'tiny';">Drink
->Me</span>
<div id=”objecti” class=”copyTiny”>
’Curiouser and curiouser!' cried
->Alice...</div>
<7body>
</html>
Отключение или включение таблицы стилей 13511
£О e DHTML & CSS for tht WWW I Disabling a Styte. Q
% » я uo 4] в
!
If you can noi read the above, click -> herel<—
Jbcwiwh Don*
Pw. 16.13. До того как посетитель щелкнет
пссылке, размер шрифта останется большим,
цвет - светлым. Такой текст трудно читать
i i ............... <Tj
"What a curious feeling!* i
If you can not read the above, click -> here <— i
Отключение
или включение
таблицы стилей
Несмотря на то, что переключение меж-
ду классами представляет собой простой
и быстрый способ изменения определен-
ных стилей, динамичный способ измене-
ния CSS требует переключения между це-
лыми таблицами стилей.
Ниже рассматривается работа только с
Internet Explorer. Здесь рассказывается, как
отменить CSS-правило - не изменить или
добавить, а удалить и вернуться к значе-
ниям, установленным в браузере пб умол-
чанию (рис. 16.13 и 16.14).
Как и при добавлении правила (см. пре-
дыдущий раздел), вы можете получить
доступ к стилю, у которого есть ID. Но
здесь вы не добавляете правило, а исклю-
чаете его (листинг 16.10).
Иногда посетители хотят видеть текст без
стилей. Это их выбор, у каждого свой вкус.
В Internet Explorer можно отменять от-
дельные стили, а затем включать их снова.
Данная функция не работает в Netscape 6.
I
feaimtnt: Don* 0 ,
Ис. 16.14. После щелчка по ссылке стиль текста
вредвляет браузер (по умолчанию это шрифт
ирного цвета размером 12 пунктов)
13521 Динамические технологии CSS
Отключение таблицы стилей
1. function toggleStyle(objectID) (...)
Добавьте в ваш код функцию toggle-
Style(). Эта функция использует ID
объекта для адресации таблицы сти-
лей, а затем включает или выключает
таблицу.
2. <style id=”strangeStyle">...</style>
В заголовке документа установите таб-
лицу стилей. Присвойте тегу <style>
ID и имя. В этом примере таблица сти-
лей называется strangeStyle.
3. onload=”toggleStyle("dullStyle'); ”
Добавьте в тег <body> триггер onload и
отключите все таблицы стилей, кото-
рые вы не желаете использовать изна-
чально.
4. onClick="document.styieSheets.
->strangestyle.disabled=true;"
Укажите обработчик событий, в кото-
ром свойству disabled таблицы стилей,
определенной на шаге 2, присваивает-
ся значение true.
I Эта методика не работает в Netscape 6.
Листинг 16.10. Когда вы щелкните по слову here,
таблица стилей strangeStyle будет
переключаться между отключенной (disabled =
true) и включенной (disabled = false)
.0,0.= ЛИСТИНГ.
CDOCTYPE html PUBLIC "-//W3C//0TD XHTML
->1.0 Transitional//EN” “http://www.w3.org/
->TR/xhtml1/DTD/xhtmll-transitional.dtd">
chtml xmlns="http //www.w3 org/l999/xhtml">
<head>
cmeta http-equiv="content-type”
->content="text/html; charset=utf-8’’ />
<title>DHTML & CSS for the WWW |
^Disabling a Style</title>
<script language=’’JavaScript"
->type="text/javascript’’>
function toggleStyle(objectlD) {
object = document.getElement
->ById(objectID)
if (object.disabled==true)
->object.disabled=false:
else object.disabled=true:
)
</script>
<style id=”strangeStyle”><1-
.bizzaro {
color: tteeeeee;
font: italic 100px fantasy;
}
-></style>
<style id=”dullStyle”><! -
.bizzaro {
color: #000000;
font: bold 18px “times new
->roman”, times, serif;
}
-></style>
</head>
<body onload=”toggleStyle( ’ dullStyle’
<span class="bizzaro”>’What a curious
->feeling! 'c/spanxbr /> <span id=
->"styleOff”>If you cannot read the above,
->click ->: <span onclick=”toggleStyle
-> (‘strangeStyle’);toggleStyle
-> (‘dullStyle’);”>here</span> <-
-></span>
</body>
</html>
Ч4КТ4. Ill
Использование инструментов
для создания DHTML и CSS
Г ПЛЕД 17 ♦ Дизайн и содержание........................354
ГИЛЕЙ 18 ♦ Навигация и управление.....................382
ГЛЕЙД 1Q ♦ Знакомство с GoLive........................423
ГИЛЕЙ 20 ♦ Dreamweaver MX 2004 Primer.................438
ГЛЙЙД 21 ♦ Отладка кода............................453
12 Тиге Дж К
ДИЭЛИНИ
(ОДЕРШЛШ
17
Дизайнеры все еще открывают возмож-
ности и ограничения по дизайну при ра-
боте с каскадными таблицами стилей.
Некоторые дизайнеры, которые были «за-
ворожены» возможностями CSS для со-
здания динамичных HTML-сайтов, не об-
ратили внимания на ряд преимуществ
CSS. Они спешили воспользоваться дина-
мичными функциями CSS и просмотрели
ряд проблем, которые может решить CSS:
способность обеспечить надежный ди-
зайн страницы в сети Internet.
Импорт внешнего
содержимого
Используя тег <script>, можно присоеди-
нить внешний файл к HTML-документу
при помощи JavaScript-кода. Также допус-
кается применять файл JavaScript для опи-
сания HTML-кода вашей Web-страницы.
Преимущество использования этого мето-
да заключается в том, что посредством
JavaScript легко «привязать» к странице ка-
кое-либо содержимое.
Импорт внешнего содержимого [355|
Рис. 17.1. Импортированный файл JavaScript
создает заголовок, под которым помещает
изображение
Листинг 17.1. Внешний файл JavaScript может
содержать любой код (написанный на JavaScript),
но если вы хотите включить HTML-содержимое,
используйте оператор document.write для
каждой строки HTML-кода
Импорт внешнего файла
JavaScript
Как и при работе с внешней таблицей
стилей (см. раздел «Добавление стилей на
Web-сайт» в главе 2), вы можете помес-
тить кодировку JavaScript во внешний
файл и затем импортировать его на Web-
страницу, как будто он был закодирован
вместе с ней (рис. 17.1). В отличие от CSS,
вы используете тег <script>, чтобы им-
портировать внешний файл JavaScript в
HTML-документ. Затем вы можете ис-
пользовать файл JavaScript для записи
HTML-кода на страницу. Преимущество
данного метода заключается в том, что вы
можете с помощью JavaScript настраивать
содержимое страницы.
Импорт внешнего файла
JavaScript в HTML-документ
1. <script src="external.js"></script>
Импортировать внешний файл Java-
Script несложно. Определите атрибут
src тега <script> и ничего не распола-
гайте внутри самого тега (листинг 17.1).
Этот метод позволяет поместить вне-
шний код JavaScript в HTML-файл. Если
JavaScript добавляет на страницу HTML-
теги, то они также будут помещены в ту
часть основного документа, к которой
«привязывается» файл JavaScript.
еее
ЛИСТИНГ,О |
document. wnteln( '<div style=
->"text-align.center"> ’);
document writeln(’<h1>Alice In
->Wonderland</hl>');
document writeln('<h3>Chapter 3</h3>');
1356 Дизайн и содержание
2. <scrip' la'Nju jjc-'JavaScr ipt"
->src iexi r t,j 1 is" namc=
->”exh । (MlSc iptl"x/script>
Hwnopi внешнего файла JavaScript
очень прост. Добавьте атрибут src в
тег -.sei i о г вместе с местоположени-
ем внешнего файла JavaScript, который
вы создали в пункте 1 (листинг 17.2).
Не помещайте код между открываю-
щим и скрывающим тегами <scгipt >.
Этот Mei од помещает внешний файл
JavaScript в HTML-файл именно вэтом
месте. 1 иш JavaScript добавит HTML-
теги на е грашшу, они будут добавлены
тоже сюда, как будто они являются ча-
стью оригинального HTML-кода.
Листинг 17.2. Вы можете расположить тег
<scгт pt> в любом месте HTML-документа,
но чтобы добавить внешнее содержимое, вам
необходимо поместить его в теге <body>.
Это позволяет создавать HTML-страницы
при помощи JavaScript
Листинг
<h tml.
<scгipt src=”external.js"x/script>
</body>
® Недостаток описанного метода заключа-
ется в том, что приходится помещать каж-
дую строку HTML-кода в JavaScript. Это
достаточно трудоемкая работа; кроме того,
в результате увеличивается объем файла
и затрудняется отладка. Сказанное касается
большинства программ WYSIWYG.
®Если вы помещаете какое-либо содержа-
ние в тег si.r 1 pt>, оно не воспринимает-
ся программой.
I n I Помните, что содержимое, созданное при
Ц помощи JavaScript, должно заключаться
1----1 в одинарные кавычки ('). Если при описа-
нии на JavaScript возникает необходи-
мость использовать в тексте одинарную
кавычку, то перед ней ставится обратный
слэш (\). То есть код document.write
('но.'.'ь и о;'; пер -, работать не будет.
Правильное написание включает слэш:
doc иг: 11 г лт I (' How\ ' s it going9 ’): •
I л I Хотя для правильной работы функции не
I требуется использовать файловое расши-
1----1 * * * * * * * рение .js, оно стало общепринятым стан-
дартом и позволяет выделить данный тип
файлов среди других.
I I На одну HTML-страницу вы можете импор-
|j тировать столько разных файлов JavaScript,
1----1 сколько сочтете нужным. По сути дела, неко-
торые строят свои Web-страницы именно та-
ким способом. Если вы будете часто пользо-
ваться данной методикой, то обнаружите, что
страницы загружаются немного медленнее,
чем при добавлении кода в HTML.
Е Любой код JavaScript, помещенный между
тегами <зсгipr>, которые включаютэгс, бу-
дет проигнорирован. Если вам нужно доба-
вить на страницу дополнительный JavaScript,
добавьте еще один тег <script> (без источ-
ника) и поместите кодировку в него.
Импорт внешнего содержимого |357|
ЙМЭ DHTML and CSS far thfcWWW £ Using ilayeQ j
: «5ч» > ; * *,_______ »
Alice In Wonderland
Рис. 17.2. Большинство браузеров поддерживают
iFrames, что позволяет вам помещать один
HTML-файл 8 другой. В данном случае рисунок и
заголовок помещены в файл index, html
Использование iFrames
Важное преимущество использования
iFrames, а не Java Script для импорта со-
держимого заключается в том, что вы
сможете затем применить стандартные
гиперссылки, чтобы изменить содержи-
мое во фрейме без перезагрузки всей
страницы (рис. 17.2).
Импорт информации при помощи
iFrames
1. external.html
Создайте новый HTML-файл и сохра-
ните его под именем external.html (лис-
тинг 17.3). Он не содержит обычных
открытых и закрытых тегов <html>
(они находятся в главном документе),
зато используется тег <body>; кроме
того, вы можете добавить любые дру-
гие теги.
2. <iframe>...</iframe>
Добавьте в ваш HTML-код теги iFrame
в том месте, куда вы желаете вставить
содержимое (листинг 17.4). Также вам
нужно настроить атрибуты iFrame:
- id и name - это уникальные атрибу-
ты фрейма, которые используются
для конечных ссылок (name) или для
того, чтобы с помощью JavaScript
найти фрейм с DOM (id). Несмотря
на то, что в большинстве браузеров
вы сможете добиться этой цели с
помощью одного лишь id, мы реко-
мендуем вам добавлять и пафе для
более старых браузеров;
- s гс сообщает Web-странице, где на-
ходится файл, который следует заг-
рузить в iFrame. С помощью конеч-
ных ссылок вы можете изменить со-
держимое фрейма;
13581 Дизайн и содержание
- frameborder настраивает ширину
границы вокруг iFrame. Чтобы пол-
ностью убрать границу (рекоменду-
ется), установите значение, равное 0;
- margineheight и marginwidth задают
поле между границей фрейма и со-
держимым внутри него;
- scrolling определяет, нужно ли про-
листывать фрейм независимо от
всей Web-страницы. Если вы изме-
ните данный параметр на по, это зна-
чит, что прокрутка запрещена. Это
приведет к тому, что содержимое не
будет отображаться, так как iFrame
будет слишком мал для просмотра.
Тем не менее, iFrame по-прежнему
будет прокручиваться вместе с Web-
страницей;
- align определяет, как выравнивает-
ся 1F г ате на странице по вертикали;
- width и height используются для оп-
ределения размеров iFrame.
3. <а href-'external.html"> External
->Content</a>
В теге < i f rame> укажите ссылку на файл
external.html, используемый для брау-
зеров, которые не поддерживают теги
<iframe> и <ilayer>.
Листинг 17.3. Внешнее содержимое
импортируется в файл index.html
• ЛИСТИНГ ц
<div style="text-align:center">
<hl>Alice In Wonderland</hl>
<h3>Chapter 2</h3>
<img src="alice36.gif" width='36O"
->height="480' border="0">
</div>
Импорт внешнего содержимого |359|
Листинг 17.4. Файл HTML использует теги
<iframe> и <1 laye г> в зависимости от типа
браузера (Netscape или Internet Explorer) для
импорта внешнего содержимого
<html>
<body>
<ilayer id="htNAV"
->src=”external. html“x/ilayer>
<nolayer>
ciframe id="htIE" src=
->"external. html” frameborder="0"
->marginheight="O” marginwidth=”O"
->width=”lOOX“ height»"1OOX">
<a href=”external.html">External
->Content</a>
</iframe>
</nolayer>
</body>
</html>
Г_ i Многие из приведенных здесь атрибутов
(j I iFrame также могут быть определены с по-
1----1 мощью CSS, а не в теге <if rame>. Например,
это width и height, которые полностью со-
ответствуют свойствам CSS. align соответ-
ствует vertical-align, marginheight и
marginwidth соответствуют margin-top и
margin-left, a frameborder - border.
Г_ I Одна из проблем при использовании iFra-
I (j I mes - это правильное указание высоты. На-
'----’ верное, было бы замечательно, если бы вы
могли просто задать ее равной 100% и за-
быть об этом, но все не так просто. При из-
менении содержимого фрейма его размеры
не будут автоматически изменяться, поэтому
вам придется разрешить прокрутку или на-
строить такую высоту, которая сможет вмес-
тить любое возможное содержание.
3601 Дизайн и содержание
Добавление
динамического
содержания
Если вы не мастер по работе с базами дан-
ных, но желаете настроить динамические
изменения содержания в зависимости от
страницы, с помощью JavaScript вы може-
те «писать» содержимое страницы. Благо-
даря методике, о которой мы рассказали в
предыдущем разделе, вы можете не толь-
ко добавлять на страницу содержимое, но
и генерировать это содержание в JavaScript
в зависимости от того, на какой именно
странице оно используется.
В данном примере мы будем использовать
два разных внешних файла JavaScript Пер-
вый файл (Header. js) использует перемен-
ные страницы, на которую он импортиру-
ется, для создания верхнего колонтитула с
заголовком страницы и другой информа-
цией. Второй файл (footer, js) динамичес-
ки отображает заголовок и URL страницы
(рис. 17.3 и 17.4).
_© о 6__ DHTML and css for the wwwI Dynamic Content Oj
। <0ч 'V ДО -Л -i 0r>up //www.webbeden, i
Alice in Wonderland
Chapter I
Down the Rebbtt-Hol*
__________________ej
Рис. 17.3. Результат при использовании
динамического верхнего и нижнего колонтитулов
.в файле index.html. Так как код колонтитулов не
встроен в страницу, вы можете изменять дизайн в
файлах JavaScript, и зти изменения будут влиять
на любую страницу, которая их использует
Q.O 6ь.DHTML end CSS for the WWW I Dynaayg-pMteat Oj
©http //www.webbedenv
Alice in Wonderland
Chapter II
The Pool of T»»rs
Рис. 17.4. Загрузите этот JavaScript на другую
страницу (index2. html), и вы получите другие
результаты
Добавлвние динамического содержания j~361~|
Листинг 17.5. Файл JavaScript (header. js)
импортируется в верхнюю часть страницы
index.html для создания верхнего колонтитула
для документа
ЛИСТИНГ--.
var writeHeader = ‘;
writeHeader += ‘<ri1>Alice in Wonderland</
ni>’;
writeHeader += ‘<h2>’;
writeHeader += chpNum;
writeHeader += ‘</h2>’;
writeHeader += ‘<h3>’;
writeHeader += chpTitle:
writeHeader += ‘ </hi3>’;
writeHeader += ‘<img src="' + illustration
+ ‘ .gif” align=''right” />’;
document.writein (writeHeader);
Листинг 17.6. Файл JavaScript (footer.js)
импортируется в нижнюю часть страницы
index.html для создания нижнего колонтитула
для документа
var writeFooter = ‘;
writeFooter += ‘<br /xhrxbr clear=''all">’;
writeFooter += '<span class=”pagelnfo''>';
writeFooter += ‘<b>Title:</b> ‘ +
self.document.title;
writeFooter += ‘<br />';
writeFooter += 1<b>URL:</b> <a href=”’ +
self.location + ">' + self.location + '</
a>’:
writeFooter += x/span><br />';
Установка верхнего и нижнего
колонтитула
1. header.js
Создайте внешний файл JavaScript и
сохраните его под именем header.js.
Он будет импортирован в начало фай-
ла index.html (см. шаг 4). Введите стро-
ку document. writeln(...), чтобы указать
HTML для верхних колонтитулов стра-
ницы. Кроме того, код в этом файле бу-
дет использовать переменные (index.html),
чтобы каждый раз обновлять заголовки,
подзаголовки, дату и т.д. (листинг 17.5).
2. footer.js
Создайте внешний файл JavaScript и
сохраните его под именем footer.js. Он
будет импортирован в конец файла
index.html (см. шаг 4). Введите строку
document. writein(.,.), чтобы описать
HTML для нижних колонтитулов стра-
ницы. В приведенном примере ниж-
ний колонтитул отображает название
страницы, заключенное между тегом
<title> (title -это не переменная Java-
Script) и URL страницы. В колонтиту-
ле представлена также ссылка на стра-
ницу оригинала и ссылка, после акти-
визации которой будет запущен почто-
вый клиент (листинг 17.6).
document.writein (writeFooter);
13621 Дизайн и содержание
3. varchpNum = ‘Chapter Г;
Включите переменные для внешнего
содержимого в тег <sc ript> вверху до-
кумента. В этом примере мы использу-
ем три различные переменные (лис-
тинг 17.7):
- chpNum записывает номер главы для
страницы;
- chpTitle записывает имя главы;
- illustration записывает имя иллю-
страции, которая должна использо-
ваться на странице. Затем это имя
применяется в верхнем колонтиту-
ле, чтобы создать тег изображения
для загрузки иллюстрации.
4. <script src=”header.js"x/script>
В теге <body> HTML-страницы определи-
те Ter<script>, который будет содержать
ссылки на источники URL для верхнего
и нижнего колонтитулов (рис. 17.5).
ЕВы можете размещать любой код в колон-
титулах. В приведенном примере код нави-
гации находится также во внешнем файле
JavaScript. Это позволяет добавлять или
удалять отдельные элементы навигации без
изменения каждой страницы Web-сайта.
S Переменные, которые вводятся на шаге 3, -
это всего лишь пример того, какую инфор-
мацию можно отображать для каждой Web-
страницы в отдельности, используя импор-
тируемый код JavaScript. Разрешается вклю-
чать любые данные, касающиеся той или
иной страницы, например ее порядковый
номер, расположение на сайте и т.п.
Листинги?. Эта простая Web-страница
(index, html) импортирует верхний и нижний
колонтитулы. Также она включает несколько
переменных JavaScript, которые добавляют
в верхний колонтитул документа заголовок,
подзаголовок, головоломку и дату
6 е.8шНг.:
c'DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN" “http://www.w3.org/
->TR/xhtmll/DTD/xhtnill-transitional.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml’’>
<head>
<title>DHTML and CSS for the WWW |
->Dynamic Content</title>
<script>
var chpNum= ‘Chapter Г;
var chpTitle= ‘Down the Rabbit-Hole’;
var iliustration= lalice02a’;
</script>
<link href="default.css"
->rel=”stylesheet’’ />
</head>
<body>
<script language="JavaScript"
->src-'header.js" name="header"></script>
< !- Begin Content ->
< p> Alice was beginning to get very
->tired of sitting by her sister on the
->bank...</p>
< !- End Content ->
<script language="JavaScript"
->src="footer.js” name=”footer"X/script>
</body>
</html>
Создание дизайна, состоящего из нескольких столбцов 13631
Рис. 17.5. Дизайн, который состоит из трех
столбцов с верхним и нижним колонтитулами.
Такой дизайн довольно обычен для Web-страниц.
Здесь мы создали его только с помощью CSS.
Обратите внимание, что столбцы не
выравниваются по высоте самого высокого, как
зто будут делать столбцы в таблице
Создание дизайна,
состоящего из нескольких
столбцов
Несмотря на то, что в течение многих лет
таблицы стояли на первом месте среди
Web-дизайнов, дизайнеры постепенно
осознают все те преимущества, которые
они получат, если будут создавать стра-
ницы с помощью только CSS. CSS-пози-
ционирование (см. главу 6) позволяет
вам точно управлять расположением ди-
зайна на странице, а также показывает,
что управление не слишком хорошо под-
ходит для создания дизайна, состоящего
из нескольких динамических столбцов.
Параметр float дает вам возможность
работать с наиболее гибкими дизайнами
(листинг 17.8 и рис. 17.5).
Листинг 17.8. Настройте дизайн из трех столбцов с помощью параметра float, расположив три объекта
по линии друг за другом
^ЛИСТИНГ.:-го]
<!DDCTYPE html PUBLIC '‘-//W3C//DTD XHTML 1.0 Transitional//EN" ’‘http://www.w3.org/TR/xhtml1/
->DTD/xhtmll-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=’'content-type” content=”text/html;charset=utf-B” />
<title>DHTML and CSS for the WWW | Creating Multicolumn Layouts</title>
<style type=”text/css” media=”screen”><!-
body {
font-size: 12рх;
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
line-height: 1брх;
background-color: #333;
}
#page {
margin: 0 auto;
width: 760px;
}
#column1, #column2, #column3 {
margin-right: 5px;
float: left;
border;solid 2px black;
13641 Дизайн и содержание
Настройка с помощью CSS
дизайна, состоящего
из нескольких столбцов
1- «раде {.}
Добавьте на вашу Web-страницу ID, что-
бы определить ее. Идентификатор будет
включать верхний колонтитул, столбцы
н нижний колонтитул. Ширина ID дол-
жна быть определена. Может показаться,
что это не нужно, но ввод данного па-
раметра позволяет добиться того, что
столбцы не будут распадаться, если окно
браузера будет слишком узким.
2. tfcolumni, йсо1итл2, #column3 {...}
Настройте ID для каждого столбца, оп-
ределив их свойства. Единственный
определяющий параметр - это float,
который должен быть задан как left.
Благодаря этому столбцы будут выст-
раиваться рядом друг с другом.
3. #со1итп1
Вы можете указать ширину, цвет фона
и любые другие специфические пара-
метры для любого столбца.'
4. «header. «footer {...}
Добавьте ID для верхнего и нижнего
колонтитулов, которые проходят по
верхней и нижней границам столбцов.
5. <div id='’page">.,</div>
В теле Web-страницы настройте объект
body, который будет включать все три
столбца, а также верхний и инжний ко-
лонтитулы.
6. <div id=”header”>...</div>
Добавьте объект header в объект раде.
7. <div id=”со 1 umn 1 ”>...</div>
Добавьте три столбца в объект раде.
Вы можете поместить в эти слои любое
содержимое, включая дополнительные
столбцы.
Листинг 17.8 (продолжение)
.00.8;..-.
«columnl {
background-color: «ссс;
width: 2DDpx;
}
#column2 {
background-color: #fff;
width: 320px;
#column3 {
background-color: #ccc;
width: 200px;
}
«header, «footer {
background-color: #ccc;
display: block;
margin: 5px 0;
padding: 5px;
width: 740px;
clear: both;
border: solid 2px black;
}
p <
padding: Юрх;
}
hi {
font-size: i.5em;
padding: 5px;
}
П2 {
font-size: 1.25em:
padding: 5px;
}
.chapter {
margin-top: 0;
margin-bottom: 3px;
font-sixe: Юрх;
}
-></style>
</nead>
<body>
<div id="page">
<div id="header">
<hl>Alice in Wonderland</hi>
</div>
Создание дизайна, состоящего из нескольких столбцов 13S51
Листинг 17.8 (окончание)
ЛИСТИНГ,
<div 1б="со1итпГ’>
<h2>Chapters</h2>
<p class="chapter”xb>Chapter
->I</b></p>
<p class="chapter''xb>Chapter
->n</bx/p>
<p class="chapter”xb>>>
->Chapter III</bx/p>
<div id=”column2">
<h2>CHAPTER III</h2>
<h2>A Caucus-Race and a Long
->Iale</h2>
<p>They were indeed a queer-looking
->party that assembled on the
->bank,. </p>
</div>
<div id=”column3”>
<h2><img src="aliceO9a.gif”
->alt=» height=”2i3” width=”T9O”
->border="0”/x/h2>
</div>
<br style="clear:both" />
<div id-'footer”>
<h3>By Lewis Carroll<br/>
THE MILLENNIUM FULCRUM
->£DIU0N 3.0</h3>
</div>
</div>
</body>
</html>
8. <br style=”clear:both" />
Добавьте тег разрыва с помощью сти-
ля clear: both. Этот тег позволяет пре-
дотвратить разрыв содержимого меж-
ду столбцами.
9. <div id=”footer">...</div>
Наконец, добавьте в нижнюю часть стра-
ницы объект footer.
л Здесь мы использовали три столбца, но в
(д ваш дизайн вы можете добавить столько
---- столбцов, сколько считаете нужным. С по-
мощью данной методики вы можете встав-
лять одни столбцы в другие.
| л | Чтобы увидеть пример дизайна, состояще-
I V I го из гРех столбцов, посетите И/еЬ-сайт
।1 этой книги (www.webbedenvironments-com/
dhtml). Другие Web-сайты «без таблиц»:
Wired News (www.wired.com) и Macromedia
(www.macromedia.com).
Если вы сделаете Web-страницу с помощью
|д только CSS и без таблиц, пришлите мне
---- ссылку (dhtml@wBbbedenvironments.com).
Я буду рад посмотреть.
13661 Дизайн и содержание
Таблицы стилей
Таблицы стали фундаментом для Web-
дизайна. Они по-прежнему используются
для управления дизайном на многих
Web-сайтах, даже несмотря на то, что из-
начально таблицы создавались для отоб-
ражения данных н больше ни для чего.
Таблицы могут получить пользу от CSS: вы
можете настроить общие атрибуты и изме-
нить их в определенном месте. При этом
вам не придется по отдельности вводить и
изменять каждый тег <table>, <tr> и <td>.
CSS может сделать многое для упрощения
табличного дизайна (рис. 17.6). Листинг
17.9 показывает, как применить к табли-
це атрибуты границ CSS. Вы можете зада-
вать таблицы с помощью CSS, но все ог-
раничения таблиц в браузерах будут дей-
ствовать по-прежнему.
Рис. 17.6. Тук-тук, кто-нибудь дома? Внешний вид
этой таблицы управляется простыми параметрами
CSS, а не сложными для изменения тегами
Разметка: CSS или таблицы?
До того как появились таблицы, Web-разметка представляла собой широкие стра-
ницы текста, занимавшие весь экран. У разработчиков не было возможности ка-
ким-либо образом разбить колонку. Web-дизайнеры пытались изменить такое рас-
положение, размещая текст в две колонки и более. С появлением таблиц Web-раз-
работчики получили возможность создавать эскиз разметки, содержащий большое
число колонок. Хотя не предполагалось, что таблицы будут выполнять большую
часть'работы по разметке Web-страниц, иа протяжении достаточно большого про-
межутка времени у них не было достойной альтернативы.
Но с появлением CSS ситуация радикально изменилась - CSS позволяют создавать
великолепные разметки Web-страннц без помощи таблиц. Но, к сожалению, не все
так просто. С возникновением CSS у Web-дизайнеров появился широкий спектр
возможностей для размещения объектов на странице. Однако эта технология по-
терпела неудачу при создании разметок с уплотненной компоновкой. Компоновка
информации на Web-страиице при помощи CSS - новый способ, и многие дизай-
неры до сих пор экспериментируют с его функциями.
Мне удалось избежать использования таблиц в проекте своего Web-сайта. Правда,
пришлось довольствоваться относительно простым вариантом разметки, в кото-
ром всего лишь один ряд и две колонки (слева - навигация, справа - содержание)
и еще несколько других элементов.
г
Таблицы стилей [367~|
Листинг 17.9. С помощью CSS вы можете
настроить теги <table>, что дает вам большую
гибкость при работе с табличными дизайнами
..
<fDOCTYPE html PUBLIC "-//W3C//0TD XHTML
->1.0 Transitional//EN” ‘’http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=’’fittp://Www.w3.org/l999/xhtml”>
<head>
<title>DHTML and CSS for the WWW |
->Ta01e 8orders</title>
<style type=”text/css” redia="screen’’><!-
table {
font: 75px "arial black";
border: solid 2px red;
}
td {
text-align: center;
width: 15Dpx;
height: 150px;
border: inset 8px red;
align: center;
td.lightBG { background-color: #cccccc; }
td.darkBG { background-color: #888666; }
-></style>
</head>
<body>
<table>
<tr>
<td class="darkBG”>X</td>
' <td class=”lightBG’’>D</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 границы таблиц должны быть оди-
Ц наковыми со всех сторон. Используя CSS,
---- вы можете по-разному настроить все гра-
ницы, что намного увеличивает гибкость
вашего дизайна. Например, вы можете за-
дать границы только внизу, чтобы создать
эффект субтитров.
“2^“) CSS также позволяет вам свернуть грани-
(j цы между ячейками таблицы, как показано
----1 в главе 8.
Краткая история таблиц в Web-дизайне
Без таблиц Internet мог бы так и не стать
универсальной средой для миллионов
пользователей по всему миру. Вы, на-
верное, удивитесь, если узнаете, что ког-
да Netscape впервые ввел таблицы в
Navigator I, это вызвало много недо-
вольных откликов, так как таблицы не
входили в HTML-стандарты World Wide
Web Consortium.
С тех пор таблицы стали стандартом
для всех, кто желает создать Web-стра-
ницу, на которой есть еще что-то кро-
ме текста и рисунков.
3681 Дизайн и содержание
Формы стилей
Для форм не существует специальных
стилей или значений, но они являются
элементами Web-дизайна, и на них будут
влиять изменения стилей (хотя это может
привести к определенной путанице). Вне-
шний вид элементов формы (полей, тек-
стовых областей, кнопок, ниспадающих
меню, полей флажка и т.д.) определяется
операционной системой, в которой рабо-
тает пользователь. Изменив внешний вид
кнопок на стандартный, вы можете избе-
жать проблем для пользователей. Поэто-
му очень важно убедиться в том, что
ваши элементы формы действительно
выглядят как элементы формы (рис. 17.7).
Вы можете применять стили к тегу эле-
мента форма, но это часто приводит к
проблеме. Например, если вы примените
границу к тегу <input>,TO она появится не
только вокруг полей формы, но и вокруг
переключателей и полей флажка, а это
будет выглядеть не слишком хорошо.
Вместо этого мы рекомендуем вам создать
классы, связанные с типами элементов
формы (листинг 17.10):
fieldset применяет заголовок и границу
вокруг области содержимого. Этот класс
чаще всего применяется с формами, но
нет причины не использовать его с со-
держимым, включая абзацы и ссылки;
legend используется как заголовок в
fleldset и должен применяться сразу
после открывающего тега fieldset;
label используется с текстом, который
появляется рядом с элементами фор-
мы, чтобы сообщить пользователю,
для чего предназначено поле формы;
(форма)
Легенда
Обозначение Вводданных Текстовая область
Поле
( О О TML and CSS f т the WW11 (Styling Form
3 * С 5 layo tTooli- Other
S >
W3C I MS'
’ Tell Us Your St<
Your Name!***;
Your Story ___________
Down, down, down,
nothing else to do,
te was,*
Alice®
to-night, Ishould think!
Are you: Male Fer iale
Share your story <ith others
DC NOT PRESS Th
IS BinTONI
Вводданных Выбор Кнопка (для формы)
(форма)
Рис. 17.7. CSS можно использовать для полного
изменения внешнего вида элементов формы.
Помните: некоторые пользователи могут
столкнуться с трудностями, если вы слишком
далеко отойдете от стандарта
Формы стилей 13691
Листинг 17.10. Этот код демонстрирует, как
использовать классы с элементами формы
CDDCTYPE html PUBLIC “-//W3C//DTD XHTML
->1.0 Transitional//EN” “http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http //www.w3.org/i999/xhtml”>
<head>
<title>DHTML and CSS for the WWW |
->Styling Forms</title>
<style type-'text/css” media-'screen”><!-
fieldset.formFieldSet {
padding: lOpx;
width: 325px;
border: solid 5px #fOO;
}
legend.formLegend {
font-size: 14рх;
font-family: "Zapf Chancery’’,
->"Comic Sans MS”, cursive;
background-color: #fcc;
padding: 5px;
border: solid 2px #fOD;
}
label {
font-size: 14px;
font-family: Verdana, Arial, Helvetica,
->sans-serif;
vertical-align: middle;
}
textarea.formTextArea {
font-family: "Courier New”, Courier,
->Monaco, monospace;
background-color: #ccc;
padding: 5px;
width: 3D0px;
height: 100px;
border: solid 1px #fDO;
}
select.formPopup {
font-size: 12рх;
font-family: Verdana, Arial, Helvetica,
->sans-serif;
background-color: #ccc;
border: solid 1px #fOO;
textarea определяет поле с нескольки-
ми строками для ввода текста. Обычно
этот класс используется для форм, в ко-
торые нужно записать большой объем
текста;
select предлагает несколько опций,
представленных в виде ниспадающе-
го меню или меню с опциями;
input (поле формы) определяет одну
строку, которая используется для вво-
да небольшого текста;
input (кнопка формы) создает простую
кнопку, которая используется для от-
правки или обнуления формы;
button (кнопка формы) предлагает дру-
гой способ создания кнопок для отправ-
ки или обнуления форм.
Браузеры Mac OS X (Safari и Camino) могут
(д применять только изменения стиля шриф-
---- та в элементах формы input, textarea или
select. Все прочие стили, включая изме-
нения фона и границ, игнорируются.
|™"'| Обратите внимание, что в коде примера мы
(д включили кнопку для поля формы. Это по-
1---1 зволит кнопке изменять свой внешний вид
в том случае, если пользователь задержит
на ней курсор мыши, к сожалению, дан-
ная опция не сработает в Internet Explorer
для Windows, который способен поддер-
живать ее только для гиперссылок.
13701 Дизайн и содержание
Листинг 17.10 (продолжение)
J. '. ЛИСТИНГ- _ ...‘ - .- -. .... > , ; ~ ijn’.HiSiXpj
input.formField {
font-size: Юрх;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
background-color; #ccc;
padding: 2px;
border: solid 1px #f00;
}
input.formButton {
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #ccc;
margin: 5px;
border: solid 1px #f00;
}
input.formButton:hover {
font-size: 12рх;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #f00;
margin: 5px;
border: solid 1px #ccc;
}
button.formButton {
color: #fff;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #f00;
margin: 5px;
border: solid 2px #333;
}
-></style>
</head>
<body bgcolor="#ffffff">
cfieldset class="formFieldSet">
clegend class="formLegend’’>Tell Us Your Story</legend>
cform id=”FormName” action=» method="get”>
<p><label>Your Namec/iabel> cinput class="formField” type-'text” name-’textfieldName"
->size=”24” /x/p>
<P></P>
<pxiabel>Your Story<br/>
c/labeixtextarea class-’formTextArea" name="textareaName’’ rows-’4”
- >cols="40”>Down, down, down. There was nothing else to do, so Alice soon began
->talking again...
</textareax/p>
cpxselect class="formPopup" name=”selectName” size=”r>
<option value=”one">firstc/option>
Формы стилей 13711
Листинг17.10 (окончание)
coption value="two">second</option>
<option value=”three">thirdc/option>
c/select>c/p>
cp>dabel>Are you: Malec/labelxinput class-TormButton" type-'radio"
->name="radiogroup" value-'radioValue’’ /> clabel>Femalec/label>cinput class='TormButton"
->type="radio" name-’radiogroup” value-’radioValue" /> <br /xbr />
cinput class='TormButton" type="checkbox” name-’checkboxName” value-'checkboxvalue"
- >/>clabel>Share your story with othersc/label>c/p>
cp>cmput class=’TormButton” type="submit” name="submit" value=”Send"/> cinput
->class=’TormButton" type="reset" /xbutton class-'formButton” name="buttonName’’
- >type="button’’>DO NOT PRESS THIS BUTTON!c/button>c/p>
c/form>
c/fieldset>
c/body>
c/html>
13721 Дизайн и содержание
Фреймы стилей
Одна из проблем с фреймами заключает-
ся в том, что границы, устанавливаемые
HTML между ними, выглядят как-то не-
уклюже (рис. 17.8). Однако при задании
фона вы можете использовать любой вид
границ (рис. 17.9).
Хотя эти границы могут быть размещены
только по левому краю или по верху от-
дельного фрейма, они очень полезны, если
необходимо показать четкую границу меж-
ду фреймами.
Создание границы фрейма
1. border.gif
Создайте изображение для границы
фрейма. В приведенном примере я ис-
пользую фрагмент орнамента, который
сохранен в файле border.gif (рис. 17.10).
Вы можете взять любые другие изобра-
жения для создания таких границ.
2. index.html
Создайте документ фрейма, обязатель-
но проверив, что границы фреймов,
расставляемые по умолчанию, отклю-
чены: border="0" framespacing="O"
frameborder="no"
Сохраните эти настройки в файле
index.html (листинг 17.11).
3. right_frame.html
Укажите фоновое свойство в теге <body>
HTML-документа (листинги 17.12 и
17.13), чтобы поместить изображение
границы, созданное на шаге 1, в качестве
фона выбранного фрейма (рис. 17.10).
Задайте повтор этого изображения как
по вертикали (repeat-у), так н по гори-
зонтали (repeat-x) - см. раздел «На-
стройка фона» в главе 5.
Рис. 17.8. Фреймы с границами, установленными
по умолчанию
Рис.17.9. Применение CSS: границы между
фреймами отмечены орнаментом
Рис. 17.10. Изображения, применяемые
для создания границ фреймов. Вы можете
использовать на своем сайте любые изображения
Фреймы стилей [373|
Листинг 17.11. Документ с описанием фреймов
<html>
<frameset rows=”*,40" border="0”
->f ramespacing="O” f rameborder=”no”>
<frameset cols=”*,150” border="0”
->framespacing="O” frameborder=”no">
<frame src=”center„frame.html"
->name=”center" noresize>
<frame src=”right_frame.html”
->nare=”right” noresize>
</frameset>
<fname src=”bottom_fname, html” name=
->'bottom” noresize scrolling="no”>
</frameset>
</html>
ЕЭтот способ действует только при размеще-
нии левой или верхней границ фрейма. Вы
не можете воспользоваться им для того,
чтобы установить одновременно обе грани-
цы или создать нижнюю и правую границу.
[ _ [ Какой будет граница фрейма - узкой или
Ц широкой, длинной или короткой, яркой или
। блеклой - зависит только от вашей фанта-
зии. Такие границы имеют лишь один не-
достаток по сравнению с границами, уста-
навливаемыми по умолчанию: ни вы, ни
. посетитель не могут с их помощью менять
размер фрейма.
Листинг17.12.Фрейме вертикальными границами
Листинг 17.13. Фрейм с горизонтальными границами
<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>
<html>
<head>
<’style type="text/css">
body {
background: silver url(border.gif)
->repeat-x Opx 0; }
</style>
</head>
<body>
<h3>Chapter V - Advice from a
->Caterpillar</h3>
</body>
</html>
13741 Дизайн и содержание
Создание цитаты
Распространенная методика при создании
дизайна состоит в том, чтобы взять цитату
из основной части статьи или рассказа и
отдельно выделить ее. Для этого мы поме-
стим небольшой свободный элемент внут-
ри другого привязанного элемента.
Высокая функциональность CSS-дизайна
обеспечивается возможностью точно рас-
полагать содержимое в окне. Если относи-
тельный элемент располагается внутри
абсолютного элемента, он использует в
качестве источника верхний левый угол
абсолютного элемента. При этом относи-
тельный элемент (листинг 17.14) переме-
щается вместе с абсолютным элементом
(рис. 17.11).
Рис. 17.11. Выделенная цитата обрамляется
текстом. Сюда мы поместили только текст
и графику, но вы можете использовать в цитате
любые элементы, включая меню навигации
Листинг 17.14. Создаются два класса, причем один из них определяется как абсолютный (mainCopy), а другой -
как относительный (pullQuote). Затем относительный класс используется с тегом <р> и помещается в тег
<div>, определенный в абсолютном классе. Это позволяет всвму содержимому на странице переместиться
вправо. Обратите внимание на строку тегов <br /> в конце кодировки вне абсолютного элемента: они
отменяют ошибку Internet Explorer, из-за которой появление полос прокрутки было бы невозможно
..fca л. У.ЛИСЯИКГ.;,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.D Transitional//EN" ‘'http://ww.w3.org/TR/xhtml1/
->DTD/xhtmll-transitional.dtd”>
<html xmlns="http://www.w3. org/1999/xhtml">
<head>
<title>DHTML and CSS for the WWW } Creating a Pull Quote</title>
<style type-’text/css” media="screen”><!-
.mainCopy {
padding: Юрх;
position: absolute;
left: ЮОрх;
border-style: none none none solid;
border-width: ООО Ipx;
border-color: #000000;
}
.pullQuote (
font-weight: bold;
padding: 1em;
position: relative;
width: 275px;
float: right;
Создание цитаты |375~]
Листинг 17.14 (окончание)
ЛИСТИНГ,- - ..г —.о]
-x/st у 1е>
</head>
<body>
<div class=”mainCopy">
<p class=”pullQuote’'><img
->src="alice37.gif” height="136”
->width=”i00" align-’right” />0ne of
->the jurors had a pencil that
->squeaked. This of course, Alice could
->not stand, and she went round the
->court and got behind him, and very
->soon found an opportunity of taking
->it away.</p>
<p>The King and Queen of Hearts were
->seated on their throne when they
->arrived. with a great crowd
-assembled about them...</p>
</div>
<br /><br /xbr /><br /xbr /><br /><br
->/><br /xbr /Xbr /xbr /Xbr /><br
->/xbr /xbr /Xbr /Xbr /><br /><br
->/><br /xbr /xbr /Xbr /><br /><br
->/><br /Xbr /Xbr /Xbr /xbr /><br
->/Xbr /xbr /><br /xbr /Xbr /xbr
->/xbr /xbr /><br /><br /Xbr /><br
->/><br />
</body>
</html>
Размещение относительного
элемента внутри абсолютного
элемента
1. .mainCopy {...}
Создайте абсолютный класс. В этом
примере мы настроили класс, кото-
рый перемещает элемент на 100 пик-
селей влево и помещает слева от эле-
мента тонкую сплошную границу.
2. .pullOuote {...)
Создайте относительный класс. В этом
примере класс будет свободно переме-
щаться вправо, текст будет полужир-
ным, заливка настроена на единицу, а
ширина элемента будет равна 275 пик-
селям.
3. <div class=”mainCopy">
<р class="pullOuote”>...</p>
</div>
В теле документа настройте тег <div>,
определенный классом mainCopy; затем
поместите внутрь класса тег с относи-
тельным классом.
| л I Если большинство содержимого поместить
Q внутрь абсолютного элемента, помимо про*
'--1 чего, вы столкнетесь с такой проблемой:
Internet Explorer не будет регистрировать
высоту элемента во время первой загрузки
страницы. В результате даже если содержи-
мое выходит вне нижней границы страницы,
полоса прокрутки появляться не будет.
Пользователь может переместить страницу
вверх или вниз с помощью кнопок со стрел-
ками, а при изменении размеров страницы
полоса прокрутки будет отображена. Вы мо-
жете гарантировать появление полосы про-
крутки только одним способом: поместите в
кодировку серию тегов <ьг />.
13761 Дизайн и содержание
Создание заголовков
Одна из проблем разработчика - это заго-
ловки, созданные при помощи графики.
Всякий раз приходится создавать новый
графический объект для каждого заголов-
ка. Используя свойство CSS для определе-
ния фона, вы можете получить огромное
количество различных фонов для заго-
ловков без необходимости каждый раз ра-
ботать над новым графическим объек-
том. Кроме того, это не повлечет за собой
увеличения времени загрузки сайта.
Создание заголовков
при помощи фона
1. background_headline.gif
При помощи графического редактора
создайте фоновое изображение и со-
храните его. Назовите файл backgro-
und_headline.gif (рис. 17.12).
2. h3.graphic{...}
Определите в CSS для тега <h3> (лис-
тинг 17.15) ассоциированный класс
graphic (см. раздел «Определение клас-
сов для создания тегов» в главе 2). До-
бавьте атрибут фона и укажите создан-
ный вами на шаге 1 файл.
Можно не называть класс, созданный
на шаге 2, graphic. Назовите его так,
как вам больше нравится.
Листинг 17.15. Способ добавления фонового
изображения в заголовок документа вполне
очевиден, тем не менее появляющиеся при этом
возможности практически безграничны
<h tml>
<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 lOpt/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>
Рис. 17.12. Изображение, на фоне которого будет
помещен заголовок
SO 6 DHTML for ihe WWW I Creating Headlines_______________О
4" 0http//www.webbede «в
[chapter VII ’’
|A Mm> T—-Pwty
the table.
®/d
Создание заголовков 13771
3. <h3 class="graphic”>
->CHAPTER VII<br>A Mad Tea-Party</h3>
Фоновый рисунок всегда будет появ-
ляться при использовании заголовков
3-го уровня, пока вы определяете в коде
атрибут class и присваиваете ему класс,
созданный вами на шаге 2 (рис. 17.13).
® Таким же образом можно определять
и другие уровни заголовков, использовать
как одинаковые, так и различные фоно-
вые изображения.
I Л I Экспериментируйте, пробуя различные фо-
U новые рисунки. Одно из фоновых изобра-
1----1 жений, которые я использовал на своем
Web-сайте, представляет собой полоску
спектра: цвет плавно изменяется справа
налево, постепенно переходя в цвет основ-
ного фона (рис. 17.14).
Рис. 17.13. Два примера заголовков.
Поэкспериментируйте с графикой и рамками
для получения различных эффектов
Рис. 17.14. Заголовки about the site и Reading
the Code представляют собой обычный текст,
расположенный на фоновом рисунке
13761 Дизайн и содержание
Фиксированный заголовок
Один из принципов Web-дизайна - помо-
гать посетителям ориентироваться на сай-
те. Посетитель всегда должен знать, на ка-
кой странице находится. К сожалению,
чтобы просмотреть Web-страницу полно-
стью, ее необходимо прокрутить, поэтому
такая важная информация, как, например,
заголовок, может попросту скрыться с глаз
посетителя по мере прокрутки страницы.
Используя CSS, нетрудно зафиксировать
заголовок в верхней части Web-страницы,
помогая посетителю определить местона-
хождение на сайте (рис. 17.15).
Фиксированное позиционирование под-
держивается в Netscape 7, Firebird, Opera
3.5+ и Safari.
Рис. 17.15. Заголовок остается фиксированным
в верхней части Web-страницы, хотя текст уже
переместился вверх
Листинг 17.1 Б. Для неподвижного заголовка
устанавливается ID, который затем добавляется
BTer<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: Opx;
left: Opx;
width: 110%;
visibility: visible; }
</style>
</head>
<body>
<div id="header">
<i>Alice In Wonderland</i> By Lewis
->Carrol
</div>
<br>
sure those are not the right
->words,...</p>
<pximg src="alice08.gif" width="200"
->height="i31" border="0"
->align="nghf>
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>
Фиксированный заголовок |379|
Фиксация заголовка
1. flheader {
При помощи класса или ID откройте
список определений. В приведенном
примере создается ID с именем header
(листинг 17.16).
2. position: fixed;
Атрибуту position присвойте значение
fixed.
3. color: red;
Добавьте любые другие определения,
которые хотите использовать для со-
здания заголовка. В примере заголо-
вок красного цвета отображается на
сером фоне.
4. )
Закройте список определений фигур-
ной скобкой.
5. <div id="header"> <i>Alice!nWonderLand
-></i>By Lewis Carrol</div>
Добавьте ID к нужному элементу. В дан-
ном случае тег <div> служит для выде-
ления заголовка страницы.
I — I Помните, что этот метод работает не во
Г| всех браузерах. Браузеры, которые не лод-
1--1 держивают фиксированные заголовки, рас-
сматривают такой заголовок как статичес-
кий элемент, поэтому он исчезает вместе
с текстом при прокрутке страницы.
I л I Мы рекомендуем вам настроить здесь
CSS для операционной системы и браузе-
1--1 ра, чтобы абсолютно точно поместить фик-
сированный элемент в Internet Explorer для
Windows.
® Неплохо расположить ссылку в фиксирован-
ном заголовке, но ошибка в Internet Explorer
5 делает это абсолютно бесполезным.
380 Дизайн и содержание
Простая тень
Еще один распространенный эффект на
Web-сайтах - создание тени объекта.
Тень от текста (особенно от больших за-
головков) четко выделяется на странице
(рис. 17.16). До появления CSS единствен-
ным способом создания теней в Internet
было использование графического форма-
та; теперь уже нет необходимости перево-
дить текст в графику.
Создание тени при помощи CSS
1. «title {. }
В списке правил CSS (листинг 17.7)
создайте три ID и назовите их title,
text и shadow. Первые два должны быть
заданы в относительных координатах, а
последний - в абсолютных. Положение
верхнего левого угла этих ID нужно
чуть сместить относительно друг друга.
е ©в DKTMLandCSSrorlteWWWl&MMng« Simple Drop Shadow О
> «Ы» , 4 (Д> -Л ©http//www.webbedenvlr «4 .
Alice in
Wonderland
Do*n, down, down, would Che Ml лмг cone co an endt 1 wonder bo* nwiy mlec
Рис. 17.16. Чтобы получить эффект выпадающей
тени, поместите два идентичных слоя друг на
друга, причем один слой должен быть светлее,
чем другой
Листинг 17.17. Слои текста и его тени расположены в слое заголовка
eOft /li::.:.:-;.::,';,) • ЛИСТИНГ. ^£*3
<htmi>
<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: Opx; left: Opx; color: #000000; z-index:2; }
«shadow { position: absolute; top: 4px; left: 4px; color: #999999; z-index:1; }
</style>
</head>
<body>
<div id=”title">
<span I0="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 time9'</p>
</body>
</html>
Простая тень |3811
Рис. 17.17. Так выглядит эффект тени
при просмотре страницы из браузера,
пе поддерживающего CSS
2. <div id="title">...</div>
Создайте слой заголовка. Он содержит
слои переднего плана (text) и фона
(shadow) и позволяет сгруппировать
эти элементы в один.
3. <span id="text”>...</span>
В слое title определите слой text для
текста, который будет отображаться по-
верх тени.
4. <span id="shadow">...</span>
Затем введите слой shadow - слой тени,
который должен содержать такой же
текст, что и слой text.
Е Браузеры, не поддерживающие CSS, вмес-
то текста с тенью отображают простой
текст, зато два раза подряд (рис. 17.17).
С
Обязательно поэкспериментируйте с раз-
личными цветами для тени и шрифтами
для основного текста и текста-тени. С по-
мощью CSS и JavaScript можно создавать
постепенно исчезающие тени.
И УПРШШ1
18
Без навигации ие может существовать ни
один сайт. С ее помощью ваш сайт нахо-
дят посетители. Существует множество
навигационных элементов, помогающих
перемещаться от страницы к странице:
главное меню с различными подменю,
вспомогательные меню, всевозможные
карты (путеводители), гипертекстовые
ссылки и т.п. Хорошо спланированная
система навигации позволяет посетите-
лям быстро находить нужную информа-
цию. Бессистемное использование нави-
гации может оттолкнуть посетителей от
вашего сайта: люди попросту заблудятся
на нем, не сумев найти интересующие их
данные, после чего вряд ли захотят вер-
нуться на ваш сайт.
Прочитав эту главу, вы узнаете о наибо-
лее продуктивных способах создания ди-
намической навигации, которые позволя-
ют улучшить гибкость сайта, а также су-
щественно расширить диапазон содержа-
щейся на нем полезной информации.
Кроме навигации между Web-страницами,
динамичный Web-сайт позволяет пользо-
вателям взаимодействовать со страницами
путем изменения содержимого после его
загрузки. Вам необходимо обеспечить сред-
ства управления для такого изменения.
Помимо навигации мы покажем вам, как
добавлять интерактивные функции, кото-
рые предоставляют пользователям больше
возможностей для управления внешним
видом Web-страницы.
Определение различных стилей ссылок |383|
Определение различных
стилей ссылок
При установке правил вы можете работать
со стилями ссылок как с любыми другими
HTML-тегами, например ассоциировать
класс с псевдоклассом ссылки или опреде-
лять псевдокласс неявно при помощи дру-
гих HTML-тегов. Количество устанавлива-
емых стилей для одной страницы не огра-
ничено, поэтому допускается создавать
столько стилей, сколько потребуется.
Если необходимо, чтобы ссылки, находя-
щиеся в навигационном меню, отлича-
лись по цвету от ссылок, используемых в
тексте, следует определить два независи-
мых стиля (рис. 18.1).
Несмотря на то, что ссылки могут ис-
пользоваться на Web-странице для раз-
ных целей (некоторые в меню, а некото-
рые в абзаце) и в различных местах (на
темном фоне и на светлом фоне), HTML
позволяет вам задать только один цвет
для всех ссылок на странице.
Часто вам нужно настроить совершенно
разные стили для ссылок в зависимости
от их предназначения и местоположения
на странице. В главе 2 мы показали вам,
как настраивать стили для четырех псевдо-
классов состояний ссылок (link, visited,
hover и active). Также вы можете связать
любой класс с внешним видом псевдо-
класса ссылки или определить псевдо-
класс по контексту из других HTML-те-
гов. Это позволит вам определять стили
в зависимости от предназначения ссылки
(листинг 18.1).
80 8 DHTML and CSS for WWW I Setting Multiple HyptrteCD
[ £ & * * X <*> «pj QhnpV/www.webbedenv
' 'And that's che Jury-box,' thought Alice, and those twelve creatures,' (she
i Document: Done
Рис. 18.1. Два стиля ссылки для содержимого
на Web-странице
Листинг 18.1. В приведенном коде добавляется
два стиля ссылок. Первый из них определяет
класс menu, а второй задает отображение ссылок,
заключенных в теге <р>
ЛДдВ л „Листинг, • • . сэ|
<html>
<head>
<style media=''screen" type="text/css">
a.menu:link {
color: #ccOOOO;
font-weight: bold;
text-decoration: none; }
a.menu:active {
color: #666666;
• font-weight: bold;
text-decoration: none; }
a.menu:visited {
color: #ccOOOO;
font-weight: bold;
text-decoration: none; }
a.menu:hover {
text-decoration: none;
color: #ffOOOO;
cursor: move; }
p a:link {
color: #OOccOO;
font-weight: bold; }
13841 Навигация и управление
Установка сложных ссылок
1. a.menu• link{ .}
Вы можете установить стили ссылок
как часть класса, если расположите
разделитель (.) и имя класса до двоето-
чия (:). В приведенном примере стили
ссылки задаются для класса menu, кото-
рый является классом тега <а> ссылки
(рис. 18.2).
Или для определения сложных ссылок
вы можете воспользоваться следую-
щим способом:
2. р а: link{..}
Вы также можете установить стиль
ссылки неявно. Ссылка будет отобра-
жаться заданным образом, если ее ро-
дителем является определенный тег.
В рассматриваемом примере отобра-
жение тега ссылки (<а>) установлено,
если опа находится внутри тега <р>
(рис. 18.3).
Н Определение нескольких цветов ссылки
позволяет посетителю отличать типы ссы-
лок. В приведенном примере ссылки меню
и ссылки, находящиеся в тексте, различны
ло внешнему виду. Может быть, вы захо-
тите, чтобы ссылки, ведущие на другие
сайты, отличались от всех остальных.
<Previous Chapter
Рис. 18.2. Стиль для ссылок меню. На экране эти
ссылки должны быть красными
Queen of Hearts
Рис. 18.3. Стиль для ссылки в тексте. На экране
эти ссылки должны быть зелеными
Листинг 18.1 (окончание)
р 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=
->"#"><Previous Chapter</a> |
<a class="menu'' href="#”>Next
->Chapter ></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>
Определение переключающихся изображений в CSS [3851
Листинг 18.2. Настройте стиль ссылки
по умолчанию, чтобы сместить текст с заливкой
и поместить изображение слева от текста. Затем
настройте определения для псевдокласса каждой
ссылки, чтобы указать, какой фон должен
использоваться для этого состояния
c'DDCTVPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN" ‘'http://www.w3.org/
->TR/xhtmll/DTD/xhtmH-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
. <head>
<title>DHTML & CSS for the WWW |
->Creating Image Rollovers with CSS</
title>
<style type-"text/css" media-screen”><! -
a {
text-decoration: none;
background-repeat: no-repeat;
background-position: left top;
padding-left: I7px;
}
a: link {
color: #cOO;
background-image; url(bg_link. png};
}
a:visited {
color: #900;
background-image; url(bg_visited. png);
}
a: hover {
color: #f00;
background-image: url(bg_hover.png};
}
a: active {
color: #090;
background-image: url{bg_active.png);
}
-></style>
</nead>
<body>
< p><a href-"ch1" onfocus=”if(this.blur)
->this. blurO; ">Chapter 1</a></p>
< p><a href-"ch2" onfocus="if(this.blur)
- >this.blur();”>Chapter 2</a></p>
<pxa href-”ch3” onfocus-’if(this.blur)
- >this.blur();”>Chapter 3</a></p>
Определение
переключающихся
изображений в CSS
Если разработчики решают использовать
для навигации переключающиеся изобра-
жения, они сразу же приходят к мысли,
что этого можно добиться с помощью
JavaScript. CSS предлагает более простое,
элегантное и надежное решение с помо-
щью параметров background и padding с
псевдоклассами ссылок (рис. 18.4).
Очевидное преимущество этой системы
состоит в том, что переключающиеся изоб-
ражения больше не требуют использования
JavaScript (листинг 18.2). Если вы перемес-
тите ссылку, эффект переключения переме-
стится вместе с ней. Вы легко можете изме-
нить переключающиеся изображения пу-
тем изменения таблицы стилей.
Листинг 18.2 (окончание)
<p>'Oh, I’ve had such a <a href-'#"
->onFocus=”if(this.blur)this.blur();
->">curious dream'</a>’ said Alice...</p>
</body>
</html>
I3 Тиге Дж. К
3861 Навигация и управление
Добавление переключающихся
изображений CSS
на Web-страницу
1. bg_link png
Создайте отдельные изображения для
всех состояний, которые вы будете ис-
пользовать, и сохраните их под любы-
ми именами; мы использовали имена
«bg_Iink», «bg_visited», «bg_hover» и
«bg_active» (рис. 18.5). Высота изобра-
жений не должна намного превышать
высоту шрифта, который вы исполь-
зуете для ввода текста. Вы можете при-
менять любой графический формат,
который поддерживается браузерами
(обычно это GIF, PNG или JPEG).
2. а{...}
В вашем HTML-документе настройте
общее определение для тега <а> или
для класса, связанного с тегом <а>
(a.myClass{...}). Заданные здесь прави-
ла будут без повторения применены ко
всем псевдоклассам ссылок. Настройте
фон так, чтобы он не повторялся, по-
местите его в левой верхней части
ссылки, затем добавьте слева заливку.
Текст не должен находиться в верхней
части изображения (обычно это шири-
на изображения плюс несколько пик-
селей).
3. a:link{...}
Теперь добавьте описания для всех псев-
доклассов ссылки, указав фоновый ри-
сунок для каждого из переключающих-
ся изображений. Конечно, вы можете
добавить любые другие изменения сти-
ля, если считаете нужным. В этом при-
мере мы также изменили цвет текста.
, 0 О О DHTML & CSS for the WWW 1 CreatingCJ j
£ «э» -> (д> 4: »
; ©Chapter 1
. ©Chapter 2
i ©Chapter 3
I "Oh, fve had such a curious dream!" said Alice, and she
told her sister, as well as she cnFould remember them,
all these strange Adventures of hers that you have just
i been reading about; and when she had finished, her
! sister kissed her, and said, "It WAS а ©сшххл d-eam,
i dear, certainly: but now run in to your t&J it’s getting
; late." So Alice got up and ran off, thinking while she ran,
i as well she might, what a >,. wonderful dream ft had
; been.
j httpV/www.webbedenvii'onme 0 j
Рис. 18.4. Изображения рядом co ссылками входят
в фон позади текста
О О О •
Рис. 18.5. Четыре рисунка для фона ссылок:
bgjink, bg.visited, bg_hover и bg_active
Определение переключающихся изображений в CSS [387|
Как избавиться от раздражающих
активных границ ссылки?
Internet Explorer 5 ввел (а многие дру-
гие браузеры адаптировали) то, что
может стать одной из самых раздра-
жающих функций для Web-дизайне-
ров: активную границу ссылки. Это
поля, которые отображаются вокруг
ссылки после того, как вы по ней
щелкните. Они могут мешать вашему
дизайну, особенно если вы использу-
ете переключающиеся изображения
CSS, или если ссылки располагаются в
одном фрейме (граница остается даже
тогда, когда уже была загружена свя-
занная ссылкой страница). Вы може-
те избавиться от этой проблемы. По-
местите следующий код в ссылки, для
которых вы желаете отключить ак-
тивную границу:
onfocus=”if (this. blur)this. Ыиг(); ”
Данный код сообщает ссылке, что при
фокусировке она должна расплывать-
ся. Граница отображаться не будет.
С
Если в качестве переключающихся изобра-
жений вы используете рисунки в формате
GIF, также вы сможете применить и GIF-
анимацию.
Эту методику вы можете комбинировать с
настройкой классов для различных стилей
ссылок.
Мы рекомендуем вам добавить столько за-
ливки, сколько нужно, чтобы текст не на-
кладывался на изображение. Иногда дан-
ный эффект (при правильной настройке)
может приводить к интересным результа-
там. Например, вы можете применить за
ссылкой градиент, который идет под текст.
При этом в различных состояниях ссылки
цвет будет различаться.
В этом примере изображение помещено сле-
ва от ссылки, но вы можете поместить его и
справа. Для этого измените положение фона
и добавьте заливку справа, а не слева.
13881 Навигация и управление
Всплывающий гипертекст
Гипертекст предоставляет посетителям до-
ступ к дополнительной информации. Но
для получения доступа необходимо щелк-
нуть по ссылке, которая откроет новый до-
кумент. Это можег иногда действовать на
нервы, не говоря уже о низкой скорости
соединения. А если информация - текст
или изображения — просто появлялась
бы под ссылкой, на которую указывает
курсор (листинг 18.3)? Такой механизм
действительно являлся бы гипертекстом
(рис. 18.6 и 18.7).
ft О ft DHTML & C$5 for the WWW | Adding Pop-up Hyp< GJ
У" I 60» 'i' ysj Л/ 'w.webbr
There was nothing so very remarkable in that: nor did Alice think it so
: VERY much out of the way to hear the Rabbit say to itself. 'Oh dean
I Oh dear! I shall be late! (when she though; ft over afterwards, ft
| occurred to her that she ought to have wondered a: this, but at the
i time ft all seemed quite natural), but when the Rabbit actually TOOK
A WATCH OUT OF ITS лап'йл-- POCKET, and looked at it. and then
I hurried on, Alice started to her feet, for it flashed across her mind
i that she had never before seen a rabbit wKh either a
wastcoai-pocket, or a watch to take out It, and burning with
curiosity, she ran across the field after it. and fortunately was Just in
' time to see it pop down a large rabbit-hole under the hedge.
Document Done 0 j
Рис. 18.6. Когда посетитель наводит указатель
на ссылку...
вое DHTML & CSS for the WWW | Adding Pop-up Нур< О
«0» фц) 0httpJ/www.webtx 0
Рис. 18.7.... под ней появляется текст
Листинг 18.3. Код всплывающего гипертекста
использует информацию обработчика событий
для размещения гипертекста под ссылкой
вое
Листинг,
c'DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN" “http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http.7/www,w3.org/1999/xhtml">
<head>
<title>DHTML Samp; CSS for the WWW |
->Adding Pop-up Hypertext</title>
<script type=”text/JavaScript"
->language="javascript"x' -
var objPopUp = null;
function popUp(event,objectID) {
objPopTrig = document.
->getElementBy!d(event};
ObjPopUp = document.
->getElementByld(objectID);
xPos - objPopTrig.offsetLeft;
yPos = objPopTrig.offsetTop +
->objPopTrig.offsetHeight;
if (xPos + objPopUp.offsetwidth >
->document.body.clientwidth} xPos =
->xpos - objPopUp.offsetwidth;
if (yPos + objPopUp.offsetHeight >
->document.Dody.clientHeight} yPos =
->yPos - objPopUp.offsetHeight -
->obj PopT rig.offsetHeight;
objPopUp.style.left = xPos + ‘px’;
objPopUp.style.top = yPos +‘px';
objPopUp.style.visibility
-> 'visible';
}
function popHide{) {
objPopUp.style.visibility =
-> 'hidden';
objPopUp = null;
}
//-> </scnpt>
<style type='’text/css" media=''screen'’><! -
body (
margin: Opx;
padding: Opx;
p {
padding Wpx;
Всплывающий гипертекст |389|
Листинг 18.3 (окончание)
a:link {
white-space' nowrap;
}
.popup {
font-size: 10px;
font-family: Verdana, Arial, Helvetica,
->sans-serif:
background-color: ffffffcc;
visibility: hidden;
margin: 0 10px;
padding: 5px;
position: absolute;
width: 125px;
border: solid 1px black;
}
-></style>
</head>
<body>
<p> TOOK A WATCH OUT OF ITS <a
->id="pop1" onmouseover=”popUp
-> {this.id,’popUpT)” onmouseout=
->”popHide()” href=,’#’'>WAISTCOAT</a>-
->P0CKET, </p>
<div id=”popUp1” class="popUp">
A "waistcoat" is called a "vest"
->in the US.</div>
<div id="popUp2'' class=’'popUp’'>
Take the blue pill!</div>
</body>
</html>
Создание всплывающего
гипертекста
1. var objPopUp = null;
Инициализируйте переменную obj-
PopUp, которая будет отслеживать, ка-
кое именно выпадающее сообщение
отображается.
2. function popUp(evt,objected){...}
Используя JavaScript, введите функ-
цию popUp(). Она проверяет ширину
окна браузера, а затем, в зависимости
от значения переменной objectID, со-
здает основу DOM для отображаемого
объекта гипертекста. Затем функция
скрывает объект (если он видим) или
размещает его под соответствующей
ссылкой (выравнивая объект, если он
находится очень близко к краю экра-
на), а затем отображает.
3. function popHide(). {...}
Добавьте в JavaScript функцию рор-
Hide(). Эта функция скрывает выпада-
ющий объект и настраивает перемен-
ную objPopup, равную null.
4. .popup (...}
Добавьте в CSS класс popUp. Этот класс
будет применен ко всем выпадающим
объектам и настроит их внешний вид.
5. id=”popl"
Добавьте в тег ID для определения
объекта. Помните, каждому объекту
необходимо задать уникальный ID.
Тег может быть любым тегом, кото-
рый использует триггеры onmouseover
и onmouseevent; чаще всего использует-
ся тег ссылки (<а>).
3901 Навигация и управление
6. onmouseover=”popUp(this.id,'popUpI')”
Добавьте в тот же тег триггер опгсои-
seevent, который активирует функцию
popup() и передает ей ID данного объек-
та и выпадающего объекта для отобра-
жения.
7. onmouseout="popHide()"
После триггера onmouseover добавьте
триггер onmouseout, активирующий
функцию popHideQ, которая скрывает
выпадающий объект.
8. <div id='’popUpi” class="popUp">...
-></div>
Для каждого выпадающего объекта ги-
пертекста создайте объект с классом pop -
Up и уникальным ID, который затем бу-
детпередан функции рсрир(), созданной
в пункте 6.
С
С
Заметьте, что ссылки, связанные со всплы-
вающим текстом, никуда не приводят (на
самом деле они связаны с верхней частью
страницы). Можно связать их с документами,
которые уточняют и дополняют информа-
цию, отображаемую во всплывающем ги-
пертексте. Допустимо использовать про-
стую функцию, которая не возвращает ни-
какого значения, но делает ссылки не реа-
гирующими на щелчок мышью.
Вы можете поместить во всплывающем
объекте подсказку, которая объясняет зна-
чение каждой ссылки в навигации, или
включить гипертекст в изображение карты
вашего сайта. Эта технология становится
просто необходимой, если у вашего сайта
есть большое графическое представление
(карта сайта), где имеются области, требую-
щие пояснения.
Выпадающее меню
О Л DHTML and CSS for the WWW I Drop-down Menu Oj
i1 '»£•.) & «X ДО <£] &rntp7/*ww.**Nx 45 J
lMenu« iin tMwwa l ~ ‘ lr
i CHAPTER XI .
I ч
' Who Stole the Tarts? -
The King and Queen d Hearts were seated on their throne when
they arrived, with a great crowd assembled about them-ali sorts at
little birds and beasts, as well as the wtide pack at cads: the
Knave was standing before them, In chains, with a soldier on each
side to guard hen; and near the King was the White Rabbit, with a w
trumpet in one hand, and a scroll of parchment tn the other. И the ‘
very middle of the court we a table, with a large dish at tarts upon •
Рис. 18.8. Заголовки меню
Y) Л Л DHTML ana CSS for the WWWI Drop-down Menu О 1
| ЙЧ» <4 ДО <j 0http,//www.webb« 10
IMoHl |Manu2^|MMW> I t .. . • , Ip
: CHAPTER XI
! Who Stole the Tarts? *
Выпадающее меню
Выпадающее меню (drop-down menu) -
это часто используемый GUI-элемент
(Graphical User Interface - графический
пользовательский интерфейс), листинг
18.4. Заголовок меню отображается в вер-
хней части окна, при щелчке по заголов-
ку раскрывается список предоставляемых
опций. Например, в меню File (Файл) вы
можете найти опции Save (Сохранить),
Close (Закрыть) и Print (Печать).
Листинг 18.4. Этот код сначала инициализирует
несколько переменных для управления меню и их
внешним видом. Самая важная из переменных,
numDropMenu, должна изменяться в зависимости
от того, с каким количеством меню вы работаете.
Функция initDropMenuO настраивает общие
триггеры для меню. Затем функция showDropMenuO
отвечает за позиционирование и отображение меню,
в то время как функция hideDropMenu() скроет
меню, когда оно перестанет быть нужным
Рис. 18.9. Когда вы помещаете курсор мыши на
заголовок меню, эффект делает фон серым. Вы
не видите, что страница отключила общее
событие, которое должно было скрыть меню при
щелчке ло странице
The King and Queen of Hearts were seated on thee throne when
they arrived, with a great crowd assembled &out them-ali sorts of
little birds ano beasts, as welt as the whole pack of cards: Che
Knave was standing before them, in chains, with a soldier on each
side to guard him; and near the King was the White Rabbit, with a
trumpet in one hand, and a scrdi of parchment in the other- in the
very middle or the court was a table, with a large dish of tarts upcn
http //www.webbedanvlronments.com/dhtml, 0
Рис. 18,10. После наведения мыши на заголовок
В 0.6-^: ЛИСТИНГ О i
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
->1.0 Transitional//EN” ‘’http://www.w3.org/
->TR/xhtmll/DTD/xhtmll-transitional.dtd”>
<html xmlns-'http://www.w3.org/l999/xhtml”>
<head>
<title>DHTML and CSS for the WWW |
->Drop-down Menu</title>
<script language=”JavaScript"
->type="text/javascript”>
var objNavNenu = null;
var prevObjNavNenu = null;
var prevObjDropNenu = null;
var numDropMenu = 3;
////// link styles
var bgLinkColor = ’ffcccccc’;
var bgLinkHover = ‘ffffffff’;
var bgLinkActive = ‘#000000’;
var linkColor = ‘#000000';
3921 Навигация и управление
Как и в большинстве систем с выпадаю-
щими меню, версия для Web позволяет
вам помесшть курсор мыши па заголовок
меню (рис. 18.8 и 18.9), а затем щелкнуть,
чтобы показан. скрытое меню (рис. 18.10).
В эти меню вы можете поместить все что
угодно; не только ссылки, но и формы,
изображение и любое другое содержание.
Добавление
выпадающих меню
1. var ob thvMH'iu = null;
Инициализирует глобальные перемен-
ные, которые вы будете использовать.
Вам следует уделить особое внимание
переменной, которая задает количество
выпадающих меню (numDrOpMenu). Эта
функция записывает общее количество
меню на странице. Также вы можете на-
строить количество цветов для переклю-
чающихся изображений.
Небольшие различия в расположении
объектов между Internet Explorer и дру-
гими браузерами вынуждают нас про-
верить, б уде ! ли эта кодировка работать
в Internet Explorer.
2. function initDropMenu ()
Добавьте в ваш JavaScript функцию
ini tDr opMem.i(). Эта функция настра-
ивает глобальный триггер, который
скрывает все видимые меню при
щелчке пользователя по экрану. За-
тем функция использует переменную
numDropMonu (введенную в пункте 1)
для всех заголовков меню (objNavMenu)
и самих меню (opjDropMenu), чтобы
скрыть меню и настроить их реакцию на
перемещение курсора мыши и щелчок.
3. function tnonuHoveг(с) {.}
Добавьте в ваш JavaScript функцию
in 1tDropMenu(). Эта функция исполь-
зуется для отключения настройки
Листинг 18.4 (продолжение)
ело Листинг сэ|
var linkHover = ’#000000’;
var linkActive = ‘#ffffff’;
var isIE = null;
if (navigator.appName.indexOf
-> (‘Microsoft Internet Explorer’)
->!= -1) isIE=l;
function initDropMenu () {
document.onclick = hideDropMenu;
for (i=1; i<=numDropMenu; i++)
{
menuName = ’dropMenu’ + i;
navMame = ’navMenu’ + i;
objDropMenu = document.
->getElementById(menuName);
objMavMenu = document.
->getElementById(navMame);
objDropMenu.style.
->visibility = ’hidden’;
objNavMenu.onmouseoveг =
->menuHover;
obj NavMenu.onmouseout =
->menuOut;
objMavNenu.onclick =
->showDropMenu;
}
objMavNenu = null;
return;
}
function menuHover(e) {
document.onclick = null;
hoverObjNavNenu = document.
‘ ->getElementById(this. id);
if (hoverObjNavMenu !=
->objMavMenu) {
hoverObjMavMenu.style.color =
->linkHover;
hoverObjMavMenu.style.
->backgroundColor =
->bgLinkHover;
}
}
function menuOut (e) (
document.onclick = hideDropMenu;
outObjMavMenu = document.
->getElementById(this.id);
Выпадающее меню 13931
Листмнг18.4 (продолжение)
660 . Листинг,
if (outObjNavMenu !=
->objNavNenu) (
outObjNavMenu.style.color =
->linkColor;
outObjNavMenu.style.
->0ackgroundColor -
->bgLinkColor;
}
}
function showDropMenu(e) {
menuName = ‘drop’ + this.id.
->substring(3,this,id.length);
objDropNenu = document.
->getElementByld(menuName);
if (prevObjDropNenu ==
->objDropMenu) {
hideDropNenu();
return;
}
if (prevObjDropNenu l= null)
->hideDropMenu();
objNavMenu = document.
->getElementById(this.id);
if ((prevObjMavMenu !=
->objMavNenu ) ||
-> (prevObjDropMenu == null))
<
objNavMenu.style.color =
->linkActive;
objNavNenu.style.
->backgroundColor =
->bgLinkActive;
}
if (objDropMenu) {
xPos = objNavNenu.
->offsetParent.offsetLeft +
->objNavMenu.offset Left;
yPos = objNavMenu.
->offsetParent.offsetTop +
->objNavNenu.offsetParent.
->offsetHeight;
if (isIE) {
ypos -= 1;
xPos -= 6;
}
objDropNenu.style.left =
->xPos + ‘px’;
меню (в пункте 2) при помещении
курсора мыши на основной заголо-
вок. Также функция настраивает цвет
фона и переднего плана для заголов-
ка меню, чтобы создать эффект пере-
ключающихся изображений (белый
фон и черный текст).
Мы можем управлять переключающи-
мися изображениями с помощью псев-
докласса a. hover, но Internet Explorer
поддерживает в тегах ссылок только
hover, поэтому мы настроим заголовки
меню с использованием тегов div.
4. function menuOut(e) {...}
Добавьте в ваш JavaScript функцию
menuOut(). Эта функция восстанавли-
вает триггер для скрытия меню при на-
ведении курсора мыши на его основ-
ной заголовок. Также функция восста-
навливает нормальное состояние заго-
ловка (серый фон и черный текст).
5. function showOropMenu(e) {...}
Добавьте в ваш JavaScript функцию
showD ropMenu (). Эта функция активиру-
ется, если пользователь щелкает по за-
головку меню. Сначала она скрывает
отображенное меню (prevObjDropMenu)
с помощью функции hideDropMenu(),
которую вы добавили в пункте 6. За-
тем она настраивает стиль заголовка
меню так, чтобы он выглядел выбран-
ным (белый текст на черном фоне),
размещает и отображает соответствую-
щее меню. Обратите внимание, что мы
используем функцию isIE из пункта
1, чтобы немного сместить положение
для Internet Explorer.
6. function hideDropMenu() {...}
Добавьте в ваш JavaScript функцию
hideDropMenuQ. Эта функция отклю-
чает событие onlick, а затем скрывает
13941 Навигация и управление
все отображенные меню и восстанав-
ливает стандартный стиль заголовка
меню (серый фон и черный текст).
7. body {. }
Настройте заливку и поля для тела
равными 0. Это позволит сделать раз-
мещение объекта более-менее уни-
версальным для разных браузеров.
Сохранится некоторая диспропорция,
но она будет намного меньше.
8. tfmenuBar
Настройте ID для строки меню. Этот
ID будет включать заголовки меню.
Вам нужно использовать относитель-
ное позиционирование, а все прочие
параметры вы можете указать по ва-
шему вкусу.
9. . menuHeader
Настраивает класс для определения
внешнего вида заголовков меню. Пом-
ните, что вместо тегов <а> мы будем
использовать теги <div>. Этот класс
настроит изначальный внешний вид
для заголовков меню. Затем это значе-
ние будет изменено JavaScript в зави-
симости от текущего состояния ссыл-
ки. Вам нужно использовать относи-
тельное позиционирование, а все про-
чие параметры вы можете указать по
вашему вкусу.
10. a.menuLink
Задает стиль для ссылок в выпадаю-
щем меню, настраивая псевдоклассы
для каждой ссылки.
11. .menuDrop
Настраивает класс для определения
внешнего вида выпадающего меню.
Используйте абсолютное позициони-
рование, настройте z-индекс над всеми
прочими слоями, а видимость укажи-
те как hidden.
Листинг 18.4 (продолжение)
objDropMenu.style.top =
->ypos + ’px’;
objDropMenu.style.
^visibility = ’visible’;
prevObjDropMenu =
->objDropNenu;
prevObjMavMenu = objMavMenu;
}
}
function hideDropMenu() {
document.onclick = null;
if (prevObjDropMenu) {
prevObjDropMenu.style.
->visibility = ’hidden’;
prevObjDropMenu = null;
prevObjNavMenu.style.color =
->linkColor;
prevObjNavNenu.style.
->backgroundColor =
->bgLinkColor;
}
objNavMenu = null;
}
</script>
<style type="text/css” media=
->”screen”><!-
body (
margin: Dpx;
padding: Opx;
}
#page {
margin: Юрх;
}
#menuBar {
color: #999999;
font-size: I2px;
font-family: arial, Helvetica.
->sans-serif;
font-weight: bold;
text-align: left;
text-transform: capitalize;
display: block;
margin-bottom: 5px;
position: relative;
top: Opx;
left: Opx;
right: Opx;
_____________________Выпадающее меню [395~|
Листинг 18.4 (продолжение)
♦ ев.......
width: 99%;
overflow: hidden;
veitical-align: middle;
border: solid 1px #000000;
background-color: #cccccc;
}
.menuHeader (
color: #0000D0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
padding; 5px;
margin: Opx;
padding-right: 15px;
display: inline;
position: relative;
border-right: 1px solid #000000;
}
a.menuLink {
display: block;
padding: 2px 5px;
border-top: 1px solid #cccccc;
}
a.menuLink:link {
color: #000000;
text-decoration: none;
}
a.menuLink:visited {
color: #000000;
text-decoration: none
}
a.menuLink:hover {
color: ffffffff;
background-color: #000000;
text-decoration: none;
}
a.menuLink:active {
color: #ffffff;
text-decoration: none;
background-color: #cc0000;
)
.menuDrop (
color: #999999;
font-size- Юрх;
font-family: arial, Helvetica, sans-
serif,
background-color: #ffffff;
12. onioad=”initDropMenu()”
Добавьте в тег <body> триггер onload,
чтобы активировать функцию init-
DropMenuO при загрузке страницы.
13. <div id=”menuBar”>...</div>
Настраивает слой строки меню с по-
мощью тегов <div> и ID menuBar.
14. <div id=”navMenu1”
->class=”menuHeader”>...«/div>
Используйте теги <div> и класс
menuHeader в слое строки меню, чтобы
добавить заголовок для всех меню. Вы
можете добавить сколько угодно заго-
ловков, но каждый должен иметь уни-
кальный navMenu ID(navMenul, navMenu2,
navMenu3 и т.д.). Настройте перемен-
ную numMenus в пункте 1 на количество
меню, которое вы создадите здесь.
Добавьте ссылки на каждый пункт со-
здаваемого меню. Меню открывается
при наведении указателя мыши на за-
головок меню. Если убрать указатель
со ссылки, меню через некоторое вре-
мя закроется. Как только указатель
опять будет наведен на ссылку, меню
снова отобразится на экране.
15. <div id=”dropMenu1"
->class="menuDrop”>...</div>
Для каждого заголовка меню, создан-
ного в пункте 14, вам нужно создать
соответствующее меню с помощью те-
гов <div> и класса menuDrop. Эти меню
имеют абсолютное позиционирова-
ние, поэтому кодировка может быть
добавлена в любом месте HTML. Каж-
дое меню должно иметь свой уникаль-
ный dropMenu ID(dropMenu1, dropMenu2,
dropMenu3 и т.д.).
3961 .Навигация и управление
Листинг 18.4 (окончание)
•
background-repeat: repeat;
visibility' hidden;
margin- 0;
padding- 0,
position: absolute;
z-index: 1000;
top: 60px,
left: 0,
width: 175px;
height: auto;
border-style' solid;
border-width - 0 1px 1px;
border-color: #003365
}
-></style>
</head>
<body bgcolor=”#ffffff" onload="initDropMenu()”>
<div id="inenuBar',>
<div id=”navMenu1" class=’’menuHeader">Menu 1</div><div id="navMenu2’’ class="menuHeader">
->Menu 2</div><div id="navMenu3” class=”menuHeader”>Nenu 3</div>
</div>
<div id="dropMenul" class="menuDrop’’>
< a clas5="menuLink” href='’#" onfocus=”if(this.blur)this.blur();“>Link 1</a>
<a class="menuLink" href»”#” onfocus=”if(this.blur)this.blur();”>Link 2</a>
< a class=”nenulink” href=”#” ohfocus=”if(this.blur)this.blur();">Link 3</a>
<a class=”menuLink" href=”#" onfocus="if(this.blur)this.blur(); ">Link 4</a>
<a class=’‘menuLink” href=”#’’ onfocus="if(this.blur)this.blur();”>Link 5</a>
</div>
<div id='’dropMenu2” class=’,menuDrop”>
< a class=”menuLink” hrefonfocus="if(this. blur)this. blur(); ’’>Link 1</a>
< a class="menuLink" href="#” onfocus="if(this.blur)this.blur(); ’'>Link 2</a>
< a class=”n»enuLink" href=”#'’ onfocus=”if(this. blur)this. blur(); ">Link 3</a>
<a class="menuLink” hrefonf ocus=’’if( this, blur )t his. blur(); ”>Link 4</a>
< a class="menuLink" href=”#" onfocus="if(this.blur)this.blur(); ">Link 5</a>
</div>
<div id=’'dropMenu3” class="menuDrop">
< a class=’’menuLink” href=”#" onfocus=’’if(this. blur)this. blur(); ”>Link 1</a>
< a class=”menuLink" href="#” onfocus=”if(this.blur)this.blur(); ”>Link 2</a>
<a class=”menuLink‘’ href="#" onfocus=’’if(this. blur)this. blur(); ">Link 3</a>
< a class="menulink” href="8” onfocus=’’if (this, blur )this. blur ();”>Link 4</a>
< a class=”menuLink” href=”#" onfocus="if(this.blur)this.blur(); ">Link 5</a>
</div>
<div id="page''>
<h1>CHAPTER XI</h1>
<h2>Who Stole the Tarts?</h2>
<p>The King and Queen of Hearts were seated on their throne when they arrived...</p>
</div> </body> </html>
Рис. 18.11. Список опций меню располагается
слева, а содержание- справа
Рис. 18.12. Подменю Метл и МепиЗ содержат
ссылки на информацию, отображающуюся справа
Сворачивающиеся меню |397|
Сворачивающиеся меню
Любой, кто когда-либо использовал GUI
(для Mac, Windows или UNIX), видел, как
появляются и исчезают меню в окне.
Щелчок по директории открывает список
находящихся в ней файлов. В это время
другие файлы и папки автоматически
сдвигаются вниз, чтобы можно было про-
смотреть содержание выбранного катало-
га. В Windows нужно щелкнуть по знач-
кам «плюс» и «минус», в Мас - по треу-
гольникам. Подобного эффекта можно
добиться и в Internet при помощи свой-
ства display (рис. 18.11 и 18.12).
Создание сворачивающегося/
раскрывающегося меню
I. function toggleClamShellMenu
->(objectID) {...}
Добавьте в ваш JavaScript функцию
toggleClamShellMenu() (листинг 18.5).
Эта функция использует переменную
objectID, чтобы найти объект меню. За-
тем она настраивает параметр display
для этого объекта как поле, если он ра-
вен block, или block, если он равен попе.
Эффект следующий: появляется меню,
и все прочее сдвигается вниз.
2. «menu (...)
Создайте правило ID-для каждого рас-
крывающегося меню, присваивая свой-
ству display значение попе. Таким обра-
зом, меню не появляются на экране при
первой загрузке страницы.
13961 Навигация и управление
3. toggleClamShellMenu('menul’)
Установите для каждого меню ссылки,
которые будут вызывать функцию, со-
зданную на шаге 1. Ей передается ID
меню, которое необходимо отобразить.
4. Орал id="menu”>...</span>
Используйте тег <span> для создания
меню и присвоения ему ID.
I Л I В подобных меню можно размещать лю-
бые элементы, в том числе графику, слис-
1---1 ки и т.п. А как это оформить наилучшим
образом - решать вам.
I I Если вы выполняете кодировку для Netscape
V 4, вы можете использовать скрипт настрой-
1---1 ки CSS, чтобы изменить определение клас-
са меню display на block (см. раздел «На-
стройка стилей для операционной системы
или браузера» в главе 16).
Листинг 18.5. Функция toggleClamSheliMenu <)
отображает или скрывает подменю
О - ,, . • ЛИСТИНГ,- - ,
<!D0CTYPE html PUBLIC ’-//W3C//0TD XHTML
1.0 Transitional//EN” "http://vMw.w3.org/
TR/xhtmli/
->DTD/xhtmli-transitional.dtd”>
<html xmlns-’http://www.w3.org/i999/xhtml”>
<head>
<title>DHTML and CSS for the WWW |
->Creating Collapsible Menus</title>
<scnpt language="javascript"
->type-'’text/javascript"><! -
function toggleClamShellMenu(objectlD) {
var object = document.get
->ElementById(objectID);
if (object.style.display ==’block’)
->object.style.display»’none’;
else object.style.displays’block’:
return;
}
// ->
</scnpt>
<style type-"text/css”><! -
Листинг 18.5 (продолжение)
body {
font-family: "Trebuchet MS”, Arial,
->Helvetica, Geneva, sans-serif;
background-color: silver;
}
.menuHead {
color: #c00;
font-size: 14рх;
font-family: "Trebuchet MS”, Arial,
-^Helvetica, Geneva, sans-serif;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #300;'
}
.inenuOption {
color: #f00;
font-size: 12рх;
font-family: "Trebuchet MS", Arial,
-Helvetica, Geneva, sans-serif;
margin-left: Юрх;
}
#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }
-></style>
</head>
<body>
<a href="home.html" target="content”>
-><b>Home</bx/a><br /><br />
<a class=’’menuHead” href="javascript:
->toggleClamShellMenu(‘menul’)”>>
->Menu K/a><br />
<span id=”menui”>
<a class="menuOption” href=
->”option1. html” target=’’content"
-»Option K/a><br />
<a class=’’menuOption" href=
->”option2.html” target=”content"
-»Option 2</a><br />
<a class=”menuOption” href=
->”option3. html” target=’’content”
-»Option 3</axbr />
<a class=”menu0ption" href=
->”option4.html” target=”content"
-»Option 4</a><br /xbr />
</span>
Сворачивающиеся меню |399]
Листинг 18.5 (окончание)
<а class-’menuHead” href-'javascript:
->toggleClamShellMenu('menu2’)">>
->Menu 2</a><br />
<span id="menu2">
<a class=’’menuOption” href=
->”option1. html" target=’’content”
-»0ption K/axbr />
<a class="menuOption" href=
->"option2.html” target="content"
-»Option 2</a><br />
<a class="menuOption" href=
->"option3.html" target="content"
-»0ption 3</axbr />
<a class="menuOption" href=
->"option4.html" target="content"
-»Option 4</axbr /><br />
</span>
<a class-"menuHead” href="javascript:
->toggle ClamShellMeriu(' menu3’ )">>
->Menu 3</axbr />
<span id=”menu3">
< a class="menuDption” href=
- >”option1. html" target=’’content"
- »0ption K/axbr />
< a class-"menuOption" href=
->"option2.html” target="cohtent”
-»0ption 2</a><br />
< a class="menuOption” href=
- >"option3.html" target="content"
- »Option 3</axbr />
< a class=’’menuOption" href=
->"option4.html" target="content"
-»Option 4</axbr />
</span>
</body>
</html>
Защита от проблем при навигации
'Я заметил, что Web-сайты обычно со-
держат множество неорганизованных
ссылок - огромные списки, зачастую
выходящие за пределы окна. Подоб-
ные перечни не очень-то радуют глаз,
занимают драгоценное место на экра-
не и не представляют никакой навига-
ционной ценности.
Посетители, которые быстро перехо-
дят от сайта к сайту, изучая только
важную информацию, никогда не бу-
дут тратить время на чтение всей
Web-страницы. Они ее быстро про-
сматривают в поисках самого важного.
Человек не способен перерабатывать
слишком большой поток данных.
Если Web-страница загромождена
различными сведениями, посетителю
приходится пробираться через сотни
ссылок, прежде чем он найдет нуж-
ную. Однако разработчики Web-при-
ложений могут помочь посетителю
ориентироваться в море информа-
ции, представленной на странице.
Выпадающее, сворачивающееся и вы-
движное меню - один из лучших спо-
собов сделать навигацию более удоб-
ной и устранить проблемы, которые
^могут возникнуть на пути посетителя.
14001 Навигация и управление
Выдвижное меню
Вы устали от сайтов с древней навигаци-
ей, элементы которой расположены в ле-
вой или правой части страницы? Меню
вашего Web-сайта занимают все больше и
больше ценного места? Страницы загро-
мождены ссылками, которые посетители
применяют только для перемещения в ка-
кую-нибудь особую часть страницы и не
используют при изучении содержимого?
Если вы ответили «Да!» хотя бы на один
из этих вопросов, я могу предложить
очень простое решение: позвольте посе-
тителям вызывать или скрывать меню по
мере необходимости, то есть создайте вы-
движное меню (sliding menu) (листинг 18.6,
рис. 18.13-18.15).
Рис. 18.13. На экране отображается только
закладка меню
Рис. 18.14. После щелчка по закладке меню
выдвигается
во л @ онтмь.* at forih.*ww|Cr«.»»a«SMwt „ ..g?.
<1 О ft А г ©1
Рис. 18.15. Теперь меню отображено полностью
Выдвижное меню
[40T]
Листинг 18.6. Функция setMenu() инициализирует
данные, азатем вызывает функцию slideMenuO,
выдвигающую меню
ЛИСТИНГ, о]
<!DOGTYPE html PUBLIC "-//W3C//DTD XHTML
>>1.0 Transitional//EN" ‘'http://www.w3.org/
->TR/xhtml1/DTD/xhtmH-transitional.dtd”>
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML & CSS for the WWW |
->Creating a Sliding Menu</title>
<script langjage=”JavaScript"><! -
var open = 0;
var siideSpeed = 10;
var object = null;
function setMenu (objectID) {
object = document.getElementByld
-> (objectIO);
if (open) { fX = -B0; cX = 0;
->open = 0; }
else ( fX = 0; cX = -80;
->open = 1; }
siideMenu(cX,fX); }
function slideMenu (cX,fX) {
if (cX != fX) {
if (cX > fX) ( CX
->siideSpeed; }
else { cX += siideSpeed; }
object.style.left - cX + 'px';
setTimeout(‘slideMenuO + cX +
->•,+ fX + )’, 0); }
return;}
// ->
</script>
<style type=''text/css"><' -
body { margin-left: 30px; }
ttmainMenu {
top: 0;
left: -80px; }
.menu { position: fixed; }
a:link {
color: red,
font: bold I2px “Trebuchet MS”, Arial,
^Helvetica, Geneva, sans-serif;
}
-></style>
</head>
<body>
<span id=''mainMenu” ciass="menu”>
Создание выдвижного меню
I. var ореп=0;
Инициализируйте следующие перемен-
ные:
- open записывает, открыто или зак-
рыто меню;
- siideSpeed записывает, сколько пик-
селей меню должно перемещать в те-
чение одного цикла анимации. Чем
больше значение, тем быстрее будет
перемещаться меню;
- object записывает адрес объекта на
экране. Изначально эта переменная
равна null.
2. function setMenu(objectID){...}
Добавьте функцию setMenu() в код Java-
Script. Она устанавливает начальную
(сХ) и конечную (fX) точки выдвигаю-
щегося меню в зависимости от его теку-
щего состояния (открыто или закрыто).
Первая переменная (сХ) определяет те-
кущее положение левой границы меню
и изменяется в диапазоне от -80 до 0.
Нижняя граница этого диапазона зави-
сит от разности между шириной меню
и закладки.
Например, когда сХ=-80, первые 80
пикселей меню скрыты, отображается
только закладка меню шириной около
20 пикселей. Значит, меню закрыто.
Когда сХ=0, левый край меню совпада-
ет с левым краем окна - меню откры-
то. Эта функция также присваивает пе-
ременной open значение 0 (закрыто),
если меню было открыто, и значение 1
(открыто), если оно было закрыто.
Кроме того, данная функция вызывает
функцию slideMenu().
4021 Навигация и управление
3. function slideMenu(cx, fX){...}
Используя JavaScript, опишите функцию
slideMenu(). Она сначала проверяет, со-
впадает ли текущее положение сХ с ко-
нечным fX. Если ответ положительный,
то выполнение прекращается. Если эти
значения не совпадают, функция при-
бавляет или вычитает два пикселя из
значения, хранящегося в сХ, в зависимо-
сти от того, открывается или закрывает-
ся меню. Она также присваивает пере-
менной, контролирующей левый край
меню, новое значение положения. Затем
функция продолжает выполнение, но
уже с новым значением сХ. Она выпол-
няется циклически до тех пор, пока зна-
чение сХ не станет равным fX (меню как
бы выдвигается из края окна).
4. .menu{. }
#ma inMenu {...}
В теге <head> документа установите таб-
лицу стилей, содержащую один глав-
ный класс, который имеет все свойства
меню (. menu), и каждому создаваемому
меню присвойте ID. В приведенном
примере определяется простое меню
(mainMenu). Заметьте, что левая граница
в .menu, которая затем изменится при
запуске функции slideMenu(), инициа-
лизирована значением -80. Такая уста-
новка не скрывает меню, закладка оста-
ется видимой.
5. <span id= 'mainMenu"
->class^' mcnu">...</span>
В теге <body> страницы создайте меню.
В рассматриваемом примере меню со-
здано при помощи таблицы, контро-
лирующей слой. Один из элементов
<td> содержит ссылку, которая при
щелчке запускает функцию setMenu(),
заставляя меню выдвигаться.
Листинг 18.6 (окончание)
00 6 Листик- 0,1
<table width="100” border-'O"
frame-'frame" cellspacing=”O”
->cellpadding="5" bgcolor-’#999999”>
<tr>
<td align=”right’’
bgcolor=”#cccccc”width=’’8D">
-><a href-'#">Option K/ax/td>
< td rowspan="6" width="lO”>
<div align='Teft">
<a href=”javascript:
->setMenu(*mainMenu')"
->onFocus-"if(this, blur)
->this.blur();”ximg src=
- > " m e n u T a b . gif"
->height=”ioo” width=”l5”
->border=’’0" /></a></div>
</td>
</tr>
<tr>
< td align-’right” width="80”><a
->href=’’#’’>0ption 2</ax/td>
</tr>
<tr>
<td align=”right”
- >bgcolor=”#cccccc” width=’’80”>
- ><a href=”#”>Option 3</a></td>
</tr>
<tr>
<td align=”nght” width-’80”><a
->href="#”>Option 4</ax/td>
</tr>
<tr>
<td align=”right”
->bgcolor="#cccccc” width=”80”xa
->href="#">Option 5</ax/td>
</tr>
<tr>
<td align="right” width=”80”xa
->href=”#”>Option 6</ax/td>
</tr>
</table>
</span>
<p>Et quid erat, quod me delectabat,
->nisi amare et amari9 ...</p>
</body>
</html>
Выдвижное меню [ДОЗ]
Использование клавиатуры
для доступа к странице
Несмотря на то, что большинство по-
сетителей вашего Web-сайта будут ис-
пользовать мышь для управления, су-
ществует достаточно много пользова-
телей, которые по разным причинам
не могут работать с мышью. Вы може-
те добавить в важные ссылки атрибут
accesskey, чтобы сделать их доступны-
ми для посетителей, использующих в
своей работе клавиатуру или систему
распознавания речи:
<а href="index.html”
->accesskey=”h”>Home</a>
Если пользователь нажмет клавишу Н,
эта ссылка будет активирована. Затем
данный пользователь сможет нажать
клавишу Return (или сказать это сло-
во), чтобы получить доступ к странице.
6. setMenu(‘mainMenu’)
В расширенной части меню (области,
выходящей из грани) добавьте вызов
функции setMenu(). При щелчке по
ссылке меню раздвинется назад.
ШВы можете создать столько меню, сколько
потребуется, при этом каждое меню должно
располагаться в собственном теге <span>, а
также иметь собственный ID. Удостоверь-
тесь, что меню не перекрывают друг друга.
В теге <span> допускается помещать любое
содержание: графику, гипертекстовые ссыл-
ки, формы и т.д.
И Как меню отображается в браузерах, не под-
держивающих DHTML? Это зависит от того,
каким образом вы его создаете. В приве-
денном примере меню будет появляться
у левой границы страницы. Если бы вы раз-
мещали меню в таблице с каким-либо со-
держанием в правой части окна, оно выгля-
дело бы как обыкновенное боковое меню
(не динамическое).
14041 Навигация и управление
Панель управления сайтом
Вы можете упростить поиск необходимой
информации и сделать свой сайт более
привлекательным, создав панель управле-
ния (remote control). В Internet панель
управления представляет собой неболь-
шое окно браузера, в котором расположе-
ны ссылки. С их помощью посетитель
может изменять содержимое в главном
окне браузера (рис. 18.16).
Для создания панели управления откройте
в браузере новое окно (см. раздел «Новое
окно браузера» в главе 15) и расположите
в нем HTML-файл, содержащий ссылки,
в атрибутах которых указывается, что но-
вые страницы надо открывать в главном
окне браузера.
Создание панели
управления сайтом
1. var remote=null;
На Web-странице, которая будет содер-
жать панель управления, инициализи-
руйте переменную remote значением
null. Это означает, что при загрузке
страницы панель управления закрыта
(листинг 18.7).
2. window.name="content"
Чтобы содержимое отображалось в глав-
ном окне, ему нужно присвоить имя, на-
пример content.
ООО OHTML and CSS for the WWW I Creating a Remote <_J >
ДО «51 0http//www.webbe i
Open Remote control Л » rc I
Рис.18.16. Ссылки в окне управления браузером
Панель управления сайтом
Листинг 18.7. Функция openRemoteO открывает
дополнительное окно
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” "http://www.w3.org/
->TR/xhtmH/DTD/xhtmll-transitional. dtd”>
<html xmlns-’’http://www.w3.org/l999/xhtml”>
<head>
<title>DHTML and CSS for the WWW |
->Creating a Remote Control</title>
<script><!-
var remote = null;
window.name = "content”;
function openRemote(contentURL,windowName,
->X,y) {
widthHeight = 'height=' + у +
-> ‘ ,width=’ + x;
if (remote) remote.focus();
else var remote = window.open(contentURL,
->windowName,widthHeight);
}
// ->
</script>
<style type="text/css" media=
->,’screen"><1 -
hl {
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.openRemoteC remote.
->html',' remote’, 150,300)”>0pen Remote
->Control </a>
<h1>Home</h1>
</b>
</body>
</html>
3. function openRemote(contentURL,
->windowName, x, y){...}
Создайте, используя JavaScript, функцию
openRemote(). Она открывает новое окно
браузера, ширина которого равна х, а вы-
сота - у. Этому окну присвойте имя
windowName. Исходный код - contentURL.
Чтобы окно панели управления всегда
появлялось поверх остальных окон, вве-
дите в сценарий функцию focus.
4. openRemote('remote.html',’remote’,
->150,300)
Функция, которая открывает окно пане-
ли управления (шаг 3), вызывается при
помощи ссылки или обработчика собы-
тий. Для ее вызова необходимо ввести
исходный файл, имя окна и его размеры.
5. controls.html
Все ссылки, находящиеся в окне панели
управления, должны указывать на содер-
жимое главного окна (в данном примере
content), допустим target=”content"
(листинг 18.8).
Исходный файл для панели управления
может содержать любой требуемый код.
Я рекомендую применять фреймовую
структуру с инструментами управле-
ния, расположенными в верхнем фрей-
ме, и узким фреймом в нижней части
страницы, содержащим ссылку, которая
закрывает окно с панелью управления.
В приведенном примере используется
событие onLoad, чтобы вызвать новое
окно с панелью управления. Функция
сообщает главному окну о закрытии
фрейма, присваивая переменной remote
значение null.
Файл close.html содержит простую
функцию closeWindow(), которая за-
крывает окно, если посетитель щелк-
нул по ссылке.
14061 Навигация и управление
Е Панель управления может содержать все,
что вы закладываете в обычный документ.
Но помните, что все элементы окна управ-
ления должны соответствовать габаритам,
заданным в функции openRemote(). Если
вы хотите, чтобы ссылки из окна панели
управления появлялись в главном окне, на-
правьте их на фрейм содержимого.
ИВ отличие от стандартного окна окно пане-
ли управления не отображает меню, нави-
гацию браузера - стрелки Back (Назад)
и Forward (Далее), текущий URL и т.п., то
есть все находящееся вокруг стандартного
окна. В верхнем правом углу окна управле-
ния находится стандартная кнопка Close
(Закрыть), позволяющая посетителю за-
крыть это окно в любой момент.
Е Чтобы открыть окно панели управления, не-
обходимо вызвать функцию openRemote().
Вы можете сделать это несколькими спосо-
бами, например запуская ее автоматически
• при загрузке главного окна браузера (со-
бытие onLoad). Еще один хороший спо-
соб - разместить в главном окне ссылку,
позволяющую заново открывать это окно,
если оно было закрыто, или помещать его
поверх всех открытых окон.
И Заметьте, что функция openRemote() ис-
пользует функцию focus, которая размеща-
ет окно панели управления поверх осталь-
ных открытых окон. Если бы в коде не было
функции focus, то открытое окно панели
управления находилось бы за другими окна-
ми. Вызов функции openRemoteO загрузил
бы его заново, но не переместил на первый
план. Таким образом, посетитель просто не
увидел бы окно на экране.
Листинг 18.8. Действие происходит в файле
controls, html. Настройки управления изменяют
содержимое главного окна и предоставляют
ссылку для того, чтобы закрыть удаленное окно.
Этот код также использует метод opener JavaScript,
который позволяет получить прямой доступ к окну,
из которого было открыто текущее окно
<!DOCTYPE html PUBLIC "-//W3C//DTQ XHTNL
->1.0 Transitional//EN" ''http://www.w3.org/
->TR/xhtmli/DTD/xhtmli-transitional.dtd">
<html xmlns=”http://www.w3.org/l999/xhtml">
<head>
<title>OHTML & CSS for the WWW |
->Controls</title>
<base target-'content” />
<script><!-
function closeWindowO {
top.self.close();
}
// ->
</script>
</head>
<body onload="window.moveTo(lOO,100)"
->onunload=”if (opener) opener.remote =
->null;”>
<div onelick-"closeWindow()"><
->Close></div>
<h2>Menu</h2>
<p><a href="index.html”>Home</a></p>
< p><a href-'pagel.html">Page K/a></p>
< p><a href=”page2.htmr’>Page 2</a></p>
< p><a nref-'page3.html">Page 3</a></p>
</body>
</html>
Панель управления сайтом 1407]
Рис. 18.17. На сайте Communication Arts окно
панели управления используется для
отображения путеводителя по лучшим сайтам
Рис.18.18. На сайте Netscape окно панели
управления используется для показа рекламы
Рис.18.19. «Kairos» использует окно панели
управления не только для навигации, но также
для ссылок на источники и ресурсы, находящиеся
как на самом сайте, так и вне его
Рекомендации, полезные при
создании панели управления
сайтом
Универсальная панель управления — это
чрезвычайно полезный инструмент. Ниже
перечислены возможности, которые сле-
дует учитывать при создании пульта
управления:
обзор Web. Вы вправе разместить в окне
панели управления любимую страни-
цу своего Web-сайта. Таким образом,
посетители смогут путешествовать по
Internet, но в то же время будут иметь
быстрый доступ к вашему сайту. Вы
Оцените все преимущества данного ме-
тода, посетив сайт Communication Arts:
www.commarts.com/CA/interactive/
caiO3 (рис. 18.17);
информационное окно. Многие сайты ис-
пользуют окно панели управления для
размещения различной информации о
новых специальных предложениях и т.п.
К сожалению, некоторые сайты, напри-
мер Netscape (www.netscape.com). при-
меняют этот метод для размещения рек-
ламы, которая обычно только раздража-
ет посетителей (рис. 18.18);
панель управления. Вы можете повы-
сить функциональность Web-сайта,
создав панель управления. Так, на сай-
те академического журнала «Kairos»
(english.ttu.edu/kairos/3.2; рис. 18.19)
используется подобная панель, состоя-
щая из двух фреймов. Левый фрейм
содержит ссылки, правый отображает
информацию о журнале, ссылки поис-
ковой машины и прочее.
14081 Навигация и управление
Панели прокрутки
для слоя
Польза, получаемая от GUI (Graphical User
Interface - графический пользовательский
интерфейс) без полосы прокрутки, точно
такая же, как и от машины без руля. Поло-
са прокрутки (scrollbar) позволяет разме-
щать бесконечное количество информа-
ции на ограниченном пространстве стра-
ницы. Операционные системы задают оп-
ределенный вид полосы прокрутки, и это
несколько стесняет дизайнеров при разра-
ботке интерфейса Web-приложения.
В главе 15 рассказывалось, как данный эле-
мент добавляется на страницу. Вы также
можете использовать DHTML для прокрут-
ки (скроллинга) отдельных слоев в окне или
фрейме (рис. 18.20 и 18.21).
Рис. 18.20. Я использовал эту технологию при
создании Web-сайта, разработанного для фильма
«The Sandman» (www.sandmanfitm.oro)
Начало станицы
Прокрутка вверх
Рис. 1821. Средства управления позволяют
посетителю перемещаться по странице
Панели прокрутки для слоя 14091
Листинг 18.9. Этот код устанавливает два
фрейма-колонки: узкая колонка слева
предназначена для полосы прокрутки,
а содержание занимает все оставшееся место
на экране
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Frameset//EN” “http://www.w3.org/TR/
->xhtmH/DTD/xhtnill-f rameset. dtd”>
<html xmlns=" http://www.w3.org/l999/xhtml’’>
<head>
<title>DHTML and CSS for the WWW |
->Creating Scroll Bars for a Layer</
title>
</head>
<frameset cols=”90,*" border="0”
->frameborder=”no" f ramespacing=’’O”>
<frame name=”scrollBar"
->src="scrollBar.html" marginwidth=”O”
->marginheight-’O’’ noresize-’noresize’’
->scrolling=’’no” />
<frame name=”content”
->src=”content.html"
->noresize=”noresize"
->scrolling=”no” />
</frameset>
</html>
Создание полосы прокрутки
1. index.html
Создайте файл с фреймовой структу-
рой и сохраните его под именем
index.html (листинг 18.9). Создайте два
фрейма-колонки. Первая колонка -
фрейм, в который загружается код из
файла scrollBar.html (рис. 18.22). Здесь
будет располагаться полоса прокрутки.
Во второй фрейм будет загружен файл
contenthtml.
Рис. 18.22. Файл с рамкой используется для того,
чтобы удержать scrollBar. html слева. Страницы
справа будут прокручиваться
Решение проблем навигации для браузеров,
не поддерживающих динамические функции
Просто используйте тег <noscript>, чтобы включить содержимое, которое будет
отображаться при условии недоступности JavaScript:
<noscript>
Туда попадает содержимое для браузера, который не поддерживает динамические
функции:
</noscript>
: В результате браузеры, которые не поддерживают скрипты, проигнорируют теги
\<noscript> и отобразят то, что находится между ними.
14101 Навигация и управление
2. sc го 11Ва г.html
Создайте HTML-файл и сохраните
его под именем scroIIBar.html (лис-
тинг 18.10). Он будет содержать эле-
менты управления полосой прокрутки.
Далее вы будете постоянно возвращать-
ся к этому файлу (см. шаги 3-13).
3. var scrolling=0;
В теге <script> в файле scrollBar.html
инициализируйте следующие пере-
менные:
- scrolling определяет, прокручива-
ется ли в данный момент слой;
- уТ записывает текущее положение
верхней границы прокручиваемого
слоя;
- 1Т устанавливает первоначальное по-
ложение верхней границы слоя; •
- у! определяет величину инкремента
для скроллинга слоя. Вы можете из-
менять эту величину: чем больше
значение, тем быстрее прокручива-
ется слой, а чем меньше, тем мед-
леннее осуществляется прокрутка;
- уН определяет высоту слоя;
object записывает адрес слоя про-
крутки для доступа к его свойствам.
4. function startScroll(objected,
->f rameName. direction) {...}
Определите, используя JavaScript, функ-
цию startScroll(). Она присваивает
переменной scrolling значение 1 (на-
чать прокрутку), определяет текущее
положение верхней границы слоя (уТ),
высоту слоя (-25, оставить нижнюю
границу), а затем вызывает функцию
scroll().
Листинг 18.10. Весь сценарий JavaScript,
контролирующий содержимое страницы,
помещается в файле scrollBar.html. Функция
scroll!) осуществляет прокрутку слоя
scrollArea во фрейме содержимого, а функции
URT() и URB() перемещают в начало и конец
страницы соответственно
<!DOCTYPE html PUBLIC “-//W3C-//DTD XHTML
->1.0 Transitional//EN’' "http://www.w3.org/
->TR/xhtml1/OTD/xhtmll-transitional.dtd">
<html xmlns=”http://www.w3.org/l999/xhtml'’>
<head>
<title>Sliding Menu</title>
<script language=”JavaScript”><!-
var scrolling = 0;
var yT = 5;
var IT = 5;
var yl = 15;
var yH = 0;
var object = null;
function startscroll(objectID,
->frameName,direction) {
object = top[frameName].document.
->getElementById(objectID);
scrolling = 1;
yT = object.style.top;
pxLoc = yT.indexDf(‘px');
if (pxLoc >= 1) yT = yT.
->substring(O,pxLoc);
yH = document.body.clientHeight -
->object.offsetHeight - 25;
scroll(direction);
}
function scroll(direction) {
if (scrolling == 1) {
if ((direction == 1) &&
-> (yT <= IT)) {
УТ = (уТ/D + yl;
if (yT > IT) yT = IT;
object.style.top = yT +
-> ‘px’;' }
else {
if ((direction == 0) &&
-> (yT >= yH)) {
yT -= yl;
if (yT < yH) yT = yH;
Панели прокрутки для слоя |4111
Листинг 18.10 (продолжение)
object.style.top = yT +
-> 'px'; }
}
yT = object.style.top;
pxloc = yT.IndexOfC px');
if (pxLoc >= 1) yT = yT.
->substring(O,pxLoc);
code2run = 'scroll('+ direction
->+ ')';
setTimeout(code2run,0);
)
return false;
)
function stopScrollO {
scrolling = 0;
return false;
}
function URB(objectIO,frameName) {
var object = top[frameName].
->document.getElementByld
-> (objectID);
yH = document.body.clientHeight -
->object.offsetHeight - 25;
object.style.top = yH +’px';
)
function URT(objectID.frameName) {
var object = top[frameName].
->document.getElementByld
-> (objectID);
object, style, top = IT + 'px';
}
H ->
</script>
<style type=”text/css”
->media=”screen"><! -
body {
background white url(bg_scroll. gif)
->repeat-y ЗЗрх 30px;
margin-left: 3px; }
a { text-decoration: none; }
-></style>
</head>
<body>
<a onmousedown="startScroll('scrollArea',
->'content',1); return false:” onmouseup=
->ustopScroll();" onmouseover=”window.
5. function scroll(direction){...}
Посредством JavaScript создайте функ-
цию scroll(). Она перемещает слой
вверх или вниз в зависимости от значе-
ния переменной direction (1 - вверх,
0- вниз), а также учитывая значение
инкремента. Функция выполняется
до тех пор, пока значение перемен-
ной scrolling равно 1.
6. function stopScroll(){..}
С помощью JavaScript запишите функ-
цию stopScroll(). Она присваивает
переменной scrolling значение 0 (пре-
кратить прокрутку).
7. function URB(objected, f rameName){..}
Введите, используя JavaScript, функ-
цию URB(). Она совмещает нижнюю
границу слоя с нижней границей окна.
8. function URT(objected, f rameName){...}
Определите функцию URT() при помо-
щи JavaScript. Она совмещает верхнюю
границу слоя с верхней границей окна.
9. - startScrolK'scrollArea’,
->'content1); return false;
Средства управления необходимо опре-
делять как ссылки с обработчиками
событий. Чтобы добавить событие
«прокрутка вверх», вызовите функ-
цию startScroll () в обработчике со-
бытий onMouseDown. Передайте функ-
ции ID объекта, к которому необходи-
мо применить скроллинг, имя фрейма,
содержащего этот объект, и присвойте
значение 1 (вверх).
412 Навигация и управление
10. startScroll('scrollArea',
’content',0)
Вызовите функцию startScroll() в
обработчике событий onMouseDown со-
ответствующей ссылки. Передайте в
функцию ID объекта, к которому не-
обходимо применить скроллинг, и имя
фрейма, содержащего этот объект.
11. stopScroll()
Чтобы остановить прокрутку слоя,
используйте функцию stopScroll(),
вызываемую в обработчике события
onMouseUp.
12. URT('scrollArea','content')
Чтобы переместиться к верхней гра-
нице слоя, вызовите функцию URT()
и передайте ей ID объекта и имя
фрейма, содержащего этот объект.
13. URB(’scrollArea','content')
Чтобы переместиться к нижней гра-
нице слоя, вызовите функцию URB()
и передайте ей ID объекта и имя фрей-
ма, содержащего этот объект.
Листинг 18.10 (окончание)
->status=’Up'; return true;” href="#”
->onfocus=”if(this.blur)this.blur();">
<img id="up” src=”up_off.gif”
->height="25” width=”25" border=”0"
->vspace="5" />
</a><br />
<a onmousedown=”URT('scrollArea',
->’content'); return false;" onmouseover=
->”window.status=’Top’; return true:”
->href="tf” onfocus="if(this.blur)this.
->blur();”>
<img id="top” src=”top_off.gif”
->height=”25” width="25” border=”0”
->vspace=”5" />
</a><br /><br />
<a onmousedown-"URB('scrollArea’,
->'content'); return false;” onmouseover=
->’’window.status=’Bottom’; return true,”
->href='’tf” onfocus=” if (this, blur )this.
->blur(); ”>
<img id=”bottom" src="bottom_off.gif”
->height = ”25" width=”25" border='’0'’
->vspace="5" />
</a><br />
<a onmousedown=''startScroll('scrollArea',
->’content’,0); return false;” onmouseup»
->"stopScroll();” onmouseover=”window.
->status='Oown'; return true;” href=”tf"
->onfocus=”if(this.blur)this.blur();”>
<img id=”down” src=”down_off.gif”
->height=”25” width=”25" border-'O"
->vspace=’’5" />
</a>
</body>
</html>
Панели прокрутки для слоя
[413]
Листинг 18.11. во фрейме содержания
расположен слой scrollArea, который будет
прокручиваться с помощью функций,
находящихся во фрейме с полосой прокрутки
<! ODCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” “http://www.w3.org/
->TR/xhtml1/DTD/xhtmli-transitional.dtd">
<html xmlns="http://www.w3.org/l999/xhtml”>
<head>
<title>DHTML & CSS for the WWW |
->Content Page</title>
<meta name="Author"
->content=”Jason Cranford Teague” />
<meta name="keywords”
->content-"Jason Cranford Teague” />
<style type="text/css”><!-
body {
color: black;
font-size- 12рх;
font-family Georgia, “Times New Roman",
->Times, serif;
line-height: 14px;
background, white urKbg_alice40a.gif)
->no-repeat fixed center;
margin-right: 1Opx;
}
•scrollArea {
position: absolute;
top: 5px;
left: 15px; }
-></style>
</head>
<body>
<div id="scrollArea”>
<h1>CHAPTER XII</h1>
<h2>Alice’s Evidence</h2>
<p>"Here!’ cried Alice, quite
->forgetting in the flurry of the
->moment how large she had grown in
->the last few minutes... </p>
<h2>THE END</h2>
</div>
</body>
</html>
14. content.html
Создайте HTML-файл и сохраните
его под именем content.html (лис-
тинг 18.11).
15. #scrollArea(...}
В файле content.html установите ID -
scrollArea. Он должен быть задан в
абсолютных координатах.
16. <span id=”scrollArea">...</span>
Определите слой scrollArea в теге
<div> или <span> (см. раздел «Созда-
ние объекта» в главе 10).
Г_ I В данном примере добавлена простая
П Функция, запускаемая при нажатии на
----- графический элемент слоя, таким обра-
зом, средства управления выделяются
при щелчке мышью.
С
Используйте команду return false в обра-
ботчике событий для элементов управления
прокруткой, чтобы не допустить отоб-
ражения всплывающего меню в MacOS.
I I Средства управления прокруткой можно
размещать в одном HTML-файле со сло-
-----1 ем (content.html). Но сначала нужно уда-
лить все ссылки на frameName и исполь-
зовать внешний файл findDOM.js вместо
findDOMFrame.js.
14141 Навигация и управление
Ввод из поля формы
Самый простой способ взаимодействия
пользователей с Web-страницей - это ис-
пользование мыши. Также вы можете при-
менять формы, чтобы получать информа-
цию от посетителей и выполнять специ-
альные действия. В главе 14 мы показали,
как перемещать объекты из одной точки в
другую, но эти точки были указаны вами.
Теперь пришло время посетителей опреде-
лять движение. Для этого мы разрешим им
вводить координаты в полях формы (лис-
тинг 18.12, рис. 18.23 и 18.24).
Получение информации
от посетителей посредством формы
1. function moveObjectTo(objectID,
->formNum) {
Добавьте функцию moveObjectTo() в
JavaScript вверху вашего документа.
Эта функция перемещает элемент из
текущего положения в новое (см. гла-
ву 14) в соответствии со значениями в
полях xVal и yVal указанной формы.
Эта форма (formNum) основана на рас-
положении формы на Web-странице.
Первая форма носит номер D, следую-
щая 1, 2, 3 и т.д.
2. <div id-’objectl” style="position:
Листинг 18.12. Для этого примера мы
адаптировали функцию moveObjectTo() так,
чтобы она могла читать значения из полей формы
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
->1.0 Transitional//EN'' “http://www.w3.org/
->TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www.w3.org/l999/xhtml">
<head>
<title>DHTML & CSS for the WWW |
->Using Input from a Form Field</title>
<script language=’'JavaScript">
function moveObjectTo(objectID,formNum) {
x = document.forms[formNum].xVal.value;
у = document.forms[formNum].yVal.value;
var object = document.getElementByld
-> (objectID);
object.style.left = x + ‘px’;
object.style.top= у + ‘px’;
}
</script>
</head>
<body>
<div id="object1" style-' visibility:
->visible; position: absolute; top: 36px;
->left: 137px;”>
<img src="coco.jpg" height="l6B"
->width="136” border="0" />
<h2>meep</h2>
</div>
<form id=”forml" action="#"
->method=”get’’>x: cinput type="text"
->name="xVal” size="3" /xbr />
y: cinput type='’text'’ name=’’yVal"
->size="3" />cbr />
cinput onclick=’’moveObjectTo
-> ('objectl',0)" type="button"
->value="Move" />
</form>
</body>
</html>
Ввод из поля формы 14151
^absolute; top: 36px; left: 137px;
->visibility: visible; ”>...</div>
Настраивает слой CSS, который разме-
щается по параметрам top и left.
3. <form action=”tt" name=”forml”
->method=”get">...</form>
Настраивает простую форму и задает
имя для нее.
4. <input type=”text” name="xVar
Рис. 18.23. Введите координаты, чтобы
переместить кота по экрану
А.эе . МГГИ.ДСКЬимWWWlUMogtapvtМИ.;
->size=”3”>
Добавляет поля формы, которые по-
зволят посетителям вводить коорди-
наты нового положения объекта х и у.
5. <input type=’’button" value=’'Move”
->’onclick=”moveObjectTo
->’(‘objecti’, 0)”>
Добавляет кнопку формы, которая ак-
тивирует функцию moveObjectTo(). Пе-
редайте функции ID объекта, который
Рис. 18.24. Кот переместился в соответствии
с введенными координатами. Хороший котик!
вы желаете переместить, а также номер
формы, созданной в пункте 3. Помни-
те, что каждая форма отдельно нумеру-
ется Web-страницей, причем первая
форма на странице получает номер D.
При нажатии этой кнопки объект пере-
местится в указанное положение.
14161 Навигация и управление
Отслеживание
указателя мыши
Как и полоса прокрутки указатель мыши
является неотъемлемой частью пользова-
тельского интерфейса. К сожалению, не-
многие браузеры позволяют управлять
отображением курсора, что ограничивает
фантазию Web-дизайнера.
Однако, используя DHTML, несложно со-
здать слой, который позволяет отслеживать
перемещение указателя мыши. В браузерах,
где можно установить состояние указателя
в попе, допускается заменить указатель
мыши собственным вариантом (рис. 18.25).
Создание объекта,
отслеживающего перемещение
указателя мыши
1. var evt^null;
В JavaScript инициализируйте перемен-
ную evt как null (листинг 18.13).
Листинг 18.13. Глобальный обработчик событий
позволяет отслеживать перемещения указателя
и связывать с ними позиционирование
графического объекта
Вве ,, ,, ЛИСГГИНГ~~г;;:^. о)
<nxml version="i.О" encoding=”utf-8''?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
->1.0 Transitional//EN” "http.//www.w3.org/
->TR/xhtml1/DTD/xhtmil-transitional.dtd”>
chtml xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML for the WWW I
->Follow the Mouse</title>
cscript language="javascript">
var evt = null;
function initPage() {
document.onmousemove = followMe;
}
function followMe(evt) (
var evt = (evt) ? evt : ((window.event) ?
->event : null);
var object = document.getElementByld
->(‘spotLight’);
object.style.left = evt.clientX -
-> (object.offsetWidth/2) + 'px';
object.style.top = evt.clientY -
-> (object.offsetHeight/2) + ‘ px’;
return;
Рис. 1825. Эффект прожектора. Черный текст находится на черном фоне. Белое пятно
перемещается под текстом, но поверх фона. У посетителя создается впечатление, что, управляя
мышью, он освещает текст прожектором
Отслеживание указателя мыши |417
Листинг 18.13 (окончание)
// ->
</scnpt>
<style type='’text/css"
media="screen”><!-
ffspotLight {
position: absolute;
z-index: 0;
top: 20px;
left: 20px;
}
#content {
font: bold 50px fantasy;
position: absolute;
z-index 100;
top: 100px;
left: ЮОрх;
}
body (
color: black;
background-color: black;
cursor, none;
}
-></style>
</head>
cbody onload="initPage(-)">
<span id="spotLight”><img
->src="spotLight. gif" height=’’3OO"
->width=”300" /></span>
<div id="content”>
Are you afraid of the dark?</div>
</body>
</html>
2. function initPageO {...}
Добавьте в JavaScript функцию init-
Page ( ). Эта функция настраивает триг-
гер (см. раздел «Привязка событий к
объектам» в главе 10): при перемеще-
нии курсора мыши выполняется
функция followMe().
3. function followMe(evt){...}
В сценарий JavaScript введите функ-
цию followMe(). Она перемещает осо-
бый объект (в рассматриваемом при-
мере объект spotlight) вслед за указа-
телем мыши, отставание при этом со-
ставляет 150 пикселей. Так как объект
представляет собой изображение раз-
мером 300x300 пикселей, указатель по-
является в его середине.
4. #spotl ight {...}
Присвойте объекту, который будет от-
слеживать перемещения курсора, ID
в абсолютных координатах. Началь-
ные значения координат верхней и ле-
вой границ объекта не имеют принци-
пиального значения, поскольку они
будут изменяться при перемещении
указателя.
5. onload=”defaultEvents(event);"
При загрузке страницы необходимо об-
рабатывать различные события, для это-
го в теге <body> документа укажите обра-
ботчик событий onload, который будет
вызывать функцию defaultEvent().
6. <span id="spotlighf>...</span>
Определите слой, который будет пере-
мещаться вместе с указателем. В рас-
сматриваемом примере в нем находит-
ся графический объект, но допускается
использовать HTML-текст, GIF-анима-
цию, то есть все, что можно располо-
жить в CSS-слое.
14161 Навигация и управление
а Чем больше объект в слое, отслеживаю-
щем перемещения указателя, тем больше
времени потребуется компьютеру, чтобы
его отобразить, а затем обновить. Таким
образом, перемещение будет происходить
заметно медленнее и резче, нежели при
использовании небольшого объекта.
ГЛ”| Одновременно с этой технологией допуска-
I Ц ется использовать и какие-либо другие, что-
।1 бы добиться еще более интересных эффек-
тов. Можно работать со слоями, имеющими
различные z-индексы (см. раздел «Элемен-
ты в порядке стека (ЗО-позиционирование)»
в главе 6), чтобы создавать Web-страницы в
виде головоломки (рис. 18.26), или исполь-
зовать PNG-графику, чтобы отображать кур-
сор в виде прицела (рис. 18.27),
Рис.1826. Экран представляет собой информационное «болото», полное беспорядочно расположенных
строк. По нему перемещается управляемое мышью пятно, при помощи которого посетитель может
найти заветную ссылку
Рис. 18.27. Курсор в виде прицела. Здесь была использована PNG-графика, чтобы сделать прицел
прозрачным и создать падающую от него тень. Однако подобного эффекта можно добиться
не во всех браузерах
Организация слайд-шоу |419|
#9.6 DHTML and.CSS for tQ -
s? s'
Pictures of
Jocelyn
Slide 1
Document:
Организация слайд-шоу
Если вам нужно продемонстрировать се-
рию фотографий (или каких-либо иллюст-
раций) в определенном порядке, пред-
ставьте их в формате слайд-шоу. Допус-
кается показывать даже два или более
слайд-шоу одновременно, чтобы отра-
зить различные стороны вашей работы
(рис. 18.28).
Слайд-шоу скрывает и отображает объек-
ты (см. главу 14) с помощью параметра
display (листинг 18.14). Это позволяет вам
загрузить набор рисунков (или другое со-
держимое), а затем расположить их на
странице без перезагрузки Web-страницы
(повышается скорость вашей работы).
Рис. 18.28. Элементы управления слайд-шоу
позволяют перемещаться вперед и назад
в определенном порядке
Отключение средств управления, встроенных в браузер
Отключение средств управления, встроенных в браузер, вызывает много споров
в среде Web-разработчиков. Некоторые справедливо полагают, что лишение сво-
боды передвижения по сайту вызывает раздражение посетителей. Отключать эти
средства управления следует только в том случае, если использование стандарт-
ных средств может повлечь за собой какие-либо катастрофические последствия
для работы сайта.
Приведу пример, иллюстрирующий необходимость такого вынужденного отклю-
чения. Я видел сайты, которые требуют от посетителей заполнить многостранич-
ную анкету. Если посетитель щелчком по кнопке Back попытается вернуться на
предыдущую страницу, чтобы исправить неверно записанные данные, может рух-
нуть вся система. В таком случае посетителю приходится не только заполнять ее
заново, но и перезагружать браузер.
14201 Навигация и управление
Создание слайд-шоу
1. slideT-new Array();
Создайте два новых массива. Первый
массив, sideT[], записывает количе-
ство отображаемых слайдов, а второй,
slideC[], сохраняет текущий отобра-
жаемый слайд.
2. slideT[0]=5,
Для каждого слайд-шоу инициализи-
руйте массив slideT[ ] и запишите в него
количество слайдов.
3. slideC[0]=1;
Для каждого слайд-шоу инициализи-
руйте массив slideCJ] со значением 1
(первый слайд).
4. function nextSlide(setNum)(...}
Создайте с помощью JavaScript функ-
цию nextSlide(). Она скрывает теку-
щий отображаемый слайд и показы-
вает следующий за ним. Если текущий
слайд - последний, функция снова вы-
водит на экран первый слайд.
5. function previousSlide(setNum){...}
Используя JavaScript, определите функ-
цию previousSlide(). Она скрывает
текущий слайд и отображает предыду-
щий. Если отображаемый слайд — пер-
вый в серии, то следующим на экране
появится последний слайд.
6. tfslideSetO, JfslideSetl {...}
Каждому ряду слайдов присвойте ID
и имя slideSet#. Этот слой будет содер-
жать все слайды, задавая для относи-
тельной последовательности слайдов
абсолютное положение.
Листинг 18.14. Организация показа слайдов
Я ЛИСТИНГ.;:;:::
<'DOCTYPE html PUBLIC "-//W3C//DTD XHTML -
->1.0 Transitional//EN” '‘http://www.w3.org/
->TR/xhtml1/DTD/xhtmll-transitional.dtd”>
<html xmlns="http://www.w3.org/l999/xhtml”>
<head>
<title>DHTML and CSS for the WWW |
->Creating a Slide Show</title>
Ocriptx1 -
slideT = new Array();
slideC = new ArrayO;
slideTEO] = 5;
slideC[O] = 1;
slideT[1] = 3;
slldeC[1] = 1;
function nextSlide(setNum) {
var objectID = 'slide' + setNum +
->slideC[setNum];
var object = document.getElementByld
- > (objectID);
object.style.display = 'none';
if (slideTEsetNum] == slideCEsetNum])
->slideC[setNum] = 1;
else slideCEsetNum]++;
var objectID = ‘slide’ + setNum +
->slideC[setNum];
var object = document.getElementByld
- > (objectID);
object.style.display = 'block';
}
function previousSlide(setNum) {
var objectID = 'slide' + setNum +
->slideC[setNum];
var object = document.getElementByld
- > (objectID);
object.style.display = 'none';
if (slideCEsetNum] == 1) slideCEsetNum] =
->slideT[setNum];
else slideCEsetNum]-;
var objectID = 'slide' + setNum +
->slideCEsetNum];
var object e document.getElementByld
- > (objectID);
object.style.display = 'block';
}
// ->
</script>
Организация слайд-шоу |4211
Листинг 18.14 (продолжение)
, ЛМСГИНГ/г???<»::г.-О J
<style type=”text/css"><!-
ttslideSetO, ttslideSetl {
background-color: silver;
text-align: center;
margin-bottom: Юрх;
padding: 5px;
position: relative;
width: 140px;
height: 140рх;
layer-background-color: silver; }
.slides {
position: relative;
z-index: 1;
>
.setTitie. .slideTitle {
font-family: "Trebuchet MS”, sans-serif;
)
.setTitie {
color: #900;
font-size: T4px;
font-weight: bold;
)
.slideTitle {
color: #666;
font-size: 12px;
)
.controls {
position: relative;
z-index: Ю;
)
#slideOl, #slide11 { display: block; }
#slide02, #slide03, #slide04, #slide05,
->#slidei2, #slidel3 { display: none; }
-x/style>
</head>
<body>
<div id=”slideSetO">
<div class=”setTitle”>Pictures of
->Jocelyn</div>
<div id="slideOl" class=”slides”>
<div class=”slideTitle”>Slide i
-></div>
<img src=”00l0s.gif” height=”67"
->width="l00’’ border-”0" /></div>
<div id=”slide02" class-”slides">
<div class-’slideTitle">Slide 2
-></'div>
7. . slides{...}
Определите класс слайдов - slides.
Он устанавливает общий стиль для
всех слайдов и должен иметь абсо-
лютное положение.
8. #slide0l, #slidei 1 {...}
Присвойте слайдам ID, называя каж-
дый slide##. Слайды пронумерованы
следующим образом: первая цифра
определяет принадлежность к соот-
ветствующему ряду слайдов, вторая
описывает его порядковый номер в
этом ряду. Таким образом, slideOh -
первый слайд в нулевом ряду.
9. <div id=”slideSetO”>...</div>
Введите CSS-слой и определите ег-о
при помощи ID slideSet#.
10. <div class=”slides" id="slideOl”>
->...</div>
Используя ID slide##, для каждого
слайда установите слой, вложенный в
слой, который создан на шаге 10. По-
местите в этом слое содержимое слай-
да.
11. onC1ick="ргeviousS1 ide(0)”
Введите ссылку, вызывающую функ-
цию previousSlide() для соответствую-
щего ряда.
12. onClick=”nextSlide(0)"
Определите ссылку, которая будет
вызывать функцию nextSlideO для
соответствующего ряда.
Г “I Слайд-шоу, созданное при помощи DHTML,
Ц может содержать не только изображения,
*- * но и любой HTML-код.
14221 Навигация и управление
Листинг 18.14 (окончание)
0.0 О..________ . ; •,л^":п»;гг-.;!ЛЙсТИНСгл’.:^5Г.иг^;:,.--Му. -г го1
<img src="0016s.gif" height=”67" width="1OO” border="0" /></div>
<div id=”slideO3” class="slides”>
<div class=’’slideTitle">Slide 3</div>
<img src="002ls.gif" height="67" width=”100” border="0" /></div>
>
<div class="Gontrols”>
<a href=’’javascript:previousSlide(O)’’ style=''margin: iOpx;”ximg src="back.gif"
->height=”11" width=”l1" border=”0” /x/аха tiref="javascript: nextSlide(O)’’
->style="margin: iOpx;”ximg src=”next.gif” heights'll" width=”l1” border=”0” />
-></ax/div>
</div>
<div id=”slideSetT>
<div class="setTitle’’>Jocelyn's Family</div>
<div id="sliden” class=''slides’’>
<div class=”slideTitle">Slide l</div>
<img src="0007s.gif” height="lOO” width=”67” bOrder=”0” /></div>
<div id="slidel2” class=”slides”>
<div class=”slideTitle">Slide 2</div>
<img src="00l2s.gif" height=’’lOO" width=’’67” border-’O" /></div>
<div id="slidel3" class=”slides’’>
<div class=’’slideTitle">Slide 3</div>
<img src="0014s.gif" height=”lOO’' width=''67’’ border=’’0’’ /></div>
<div class="controls">
<a href-'javascript:previousSlide(1)” style="margin: 10px; "ximg src=”back.gif"
->height="H” width="n" border="0" /></a><a href=”javascript:nextSlide(i)"
->style="margin: 10px; "Ximg src=”next.gif" height="11" width=”11" border=’’0” />
-x/ax/div>
</div>
</body>
</html>
ЗШОМСШ (dOLIVL
19
GoLive представляет собой пакет программ,
предназначенный для создания HTML-стра-
ниц. В нем соединены редактор HTML-кода
и WYSIWYG-редактор (What You See Is
What You Get - что ты видишь, то и полу-
чаешь). Данный пакет был создан компа-
нией GoLive и первоначально назывался
CyberStudio. Затем права на пакет GoLive
были приобретены компанией Adobe Sys-
tems Inc., которая и направила все усилия
на разработку, вероятно, одного из самых
ярких и успешных продуктов для создания
Web-приложений.
В течение многих лет пакет GoLive совер-
шенствовался, изменялся, присоединяя раз-
личные технологии. На сегодняшний день
он включает в себя такие инструменты, как
язык описания сценариев JavaScript, CSS
и HTML. Тем не менее, совмещая в себе все
перечисленные инструменты, пакет GoLive
имеет простой и понятный интерфейс.
Теги удобно расположены и могут быть из-
менены из различных палитр. Все модифи-
кации, которые вы вносите, сразу отобра-
жаются на экране. Таким образом, вы мо-
жете контролировать рабочий процесс.
В этой главе рассказывается, как создавать
в GoLive DHTML и CSS, а также добавлять
стили и анимировать сложные объекты.
Особенно интересным в этой версии GoLive
является полный CSS-редактор с функция-
ми редактирования в режиме реального
времени (дополнительную информацию о
них вы получите в этой главе).
1424] Знакомство c GoLive
Интерфейс GoLive
Хотя программа GoLive изначально созда-
валась не Adobe, тем не менее в ее послед-
них версиях воплотились все преимуще-
ства продуктов этой компании. Компания
Adobe внесла туда множество новых функ-
циональных возможностей, сумев при этом
сохранить хорошую организацию и про-
стоту интерфейса.
Интерфейс GoLive, построенный по прин-
ципу WYSIWYG, позволяет даже новичкам
создавать собственные Web-страницы. Но
этот программный пакет также включает в
себя достаточно мощные инструменты ре-
дактирования кода (для HTML, JavaScript и
CSS), полезные для профессионалов.
Интерфейс можно логически разделить на
пять областей: окно документа (document
window), панель инструментов (toolbar),
узел управления (site controls) и другие
инструменты (рис. 19.1).
Палитра выбора
цвета
Рис. 19.1. Интерфейс GoLive включает 8 себя окно документа, панель инструментов, узел управления
и различные палитры
____________________________________________Интерфейс GoLive [425]
Рис. 19.2. Окно документа в режиме разметки. Вы
можете добавлять, перемещать и изменять
элементы, не имея ни малейшего представления
о HTML-тегах
Окно документа
Окно документа представляет собой часть
интерфейса, в котором отображается код,
описывающий Web-страницу. В этом окне
вы можете редактировать код. Для перехо-
да из одного режима в другой щелкните по
кнопке в верхней части окна. Ниже пере-
числены все режимы работы в окне GoLive:
Layout Mode (Режим разметки страни-
цы) очень похож на аналогичный ре-
жим текстового редактора. Он позволя-
ет работать непосредственно со страни-
цей, а не с HTML-тегами, и наблюдать,
как она изменяется (рис. 19.2);
Frame Mode (Фреймовый режим) пред-
назначен для размещения и редактиро-
вания фреймов на странице;
Source Mode (Просмотр исходного кода)
позволяет редактировать код HTML, CSS
н JavaScript (рис. 19.3);
Outline Mode (Режим структуры) очень
полезен для просмотра структуры Web-
страницы (рис. 19.4);
Рис. 19.3. Окно документа в режиме просмотра
исходного кода. Режим позволяет редактировать
код Web-страницы, включая CSS и JavaScript
Рис. 19.4. Режим структуры также позволяет
редактировать код Web-страницы, однако в этом
режиме отображается иерархическая структура
кода, что очень полезно при его проверке
Знакомство с GoLive
Preview Mode (Режим предварительно-
го просмотра) позволяет увидеть стра-
ницу такой, какой она будет при запус-
ке из браузера;
PDF Preview позволяет вам просмат-
ривать файл в формате PDF. Вы може-
те сгенерировать PDF-файлы из всех
HTML-документов в Adobe GoLive CS.
Эта отличная функция позволяет вам
подготовить документы в нужном фор-
мате для других пользователей.
Панель инструментов
На панели инструментов расположены
кнопки, предназначенные для быстрого
доступа к наиболее часто используемым
стилям и функциям. Панель расположена
в верхней части экрана, однако ее можно
свободно перемещать.
Панель инструментов является контекст-
но-зависимым элементом интерфейса.
Это значит, что набор инструментов, рас-
положенных на ней, определяется тем,
что выделено и что отображается в окне
документа. Например, если вы редактиру-
ете текст в режиме разметки документа,
то на панель выводятся инструменты,
необходимые для его форматирования
(рис. 19.5). Если вы выделите слой (плаваю-
щий блок в GoLive), то на панели инстру-
ментов появятся кнопки, позволяющие
изменять размер шрифта, местоположе-
ние и выравнивание слоя (рис. 19.6).
IjHeader 1 ' t t 1 |Nor* В fj~ т l~A «Я ** ЛЗ иЪ 4J
Рис. 19.5. Панель инструментов изменяет набор кнопок в зависимости от элементов, выделенных в окне
документа. На рисунке показан вид панели при выделении текста
»4 «на,
Рис. 19.6. Здесь представлен вид панели при выделении слоя. Определенные элементы (например,
выделение документа, предварительный просмотр и вызов справки) остаются не активизированными
Интерфейс GoLive ,427,
Палитра Объекты
Палитра Объекты (которую вы можете
видеть на рис. 19.1) позволяет вам с помо-
щью мыши перемещать на страницу раз-
личные функции HTML. Палитра Объек-
ты разделена на следующие категории:
Basic включает базовые элементы (ком-
ментарии, рисунки, разрывы строк, Flash
и другие объекты);
Form elements включает большое ко-
личество элементов формы и опций уп-
равления;
Frame and Framesets позволяет вам до-
бавлять элементы, которые необходи-
мы для документов Frame и Frameset;
Diagram - это мощная функция, кото-
рая позволяет вам создавать сложные
диаграммы, показывающие структуру
вашего сайта и местонахождение раз-
личных ресурсов;
SMIL elements помогает вам добавлять
на ваши страницы элементы языка
SMIL;
Smart objects позволяет вам добавлять
любой файловый формат Adobe (напри-
мер, PDF). Эта полезная функция GoLive
обработает такой формат как оптимизи-
рованный объект Web-графики и разме-
стит его на вашей странице;
Head elements предоставляет вам доступ
ко всем элементам, которые использу-
ются в HTML-тегах;
Site items позволяет вам изменять раз-
личные функции сайта, включая набо-
ры шрифтов и цветовые палитры;
QuickTime elements дает вам мгновен-
ный доступ к определенным функциям
QuickTime, позволяя создавать сложные
страницы с объектами мультимедиа.
14261 Знакомство c GoLive
Inspector и другие палитры
GoLive предлагает ряд специальных па-
литр, которые дают вам доступ к огром-
ному количеству функций. Вы можете
скрыть или отобразить палитры, выбрав
их в меню Окно (Window). Вот (в допол-
нение к палитре Объекты) список самых
важных палитр для CSS и DHTML:
Objects (Объекты). Эти палитры обес-
печивают доступ к бессчетному количе-
ству HTML-тегов и тегов других объек-
тов, которые вы можете использовать
при создании своей Web-страницы;
Color (Цвет). Данная палитра позволяет
выбирать цвета переднего плана и фона;
Inspector (Инспектор). Эта палитра
предназначена для определения атри-
бутов выделенного объекта. Inspector -
контекстно-зависимая палитра, и ее
свойства зависят от типа выделенно-
го объекта;
Source Code (Просмотр исходного ко-
да). Данная палитра позволяет читать
и изменять исходный код в режиме раз-
метки страницы.
Прочие инструменты
В GoLive включены великолепные ин-
струменты управления страницей и FTP-
клиент. Различные опции позволяют не
только управлять сайтом, но и выбороч-
но загружать файлы, которые были не-
давно изменены.
GoLive также включает в себя программу
проверки орфографии. Наряду с этим дан-
ный программный пакет содержит инстру-
мент, который помогает определить время
загрузки страницы, способен предупредить
о возможных проблемах, возникающих при
загрузке из различных браузеров, а также
проверить связи между страницами.
Кроме того, в GoLive имеется несколько
редакторов новых Web-технологий, в том
числе CSS-редактор и JavaScript.
Внедрение CSS
в Web-страницу
1. Откройте новый или существующий
HTML-файл, выбрав в меню пункты
File New (Файл О Создать) или File
Open (Файл <0 Открыть).
2. В режиме разметки страницы (см. пре-
дыдущий раздел) нажмите на кнопку
CSS в верхнем правом углу окна доку-
мента, чтобы получить доступ к окну
стилей страницы (рис. 19.7).
>H»ad HleiCSSnGcL»»' 'Property 'J g
Рис.19.7. Кнопка CSS открывает окно стилей страницы
Внедрение CSS в Web-страницу |429|
Рис. 19.8. Так выглядит CSS-редактор, когда вы
впервые его откроете
3. Открыв CSS-редактор (рис. 19.8), щелк-
ните по стрелке Дополнительно (Advan-
ced), чтобы просмотреть полный спи-
сок функций в интерфейсе редактора
(рис. 19.9).
4. Щелкните по кнопке с типом CSS-се-
лектора, который вы желаете использо-
вать: элементы маркировки, класс или
ID. В этом примере выберите кнопку
Создать стиль, который применяется к
элементам маркировки (Create a Style
That Applies to Markup Elements), затем
введите для селектора имя «Ы».
Новый элемент стиля для Ы появится
в окне CSS-определений, и CSS-редак-
тор позволит вам ввести функции для
данного класса.
Рис. 19.9. Опции Дополнительно открыты в CSS-
редакторе
14301 Знакомство c GoLive
5. Настройте CSS-определения, которые
вы желаете использовать. Обратите вни-
мание на функцию обновления в редак-
торе; эта функция показывает вам, как
должен выглядеть стиль (рис. 19.10).
6. После добавления всех определений
CSS и правил, которые вы желаете ис-
пользовать, вы можете щелкнуть по
вкладке Источник (Source), чтобы про-
смотреть источник CSS.
7. Вернитесь в HTML-документ и добавь-
те элемент h 1 с текстом, чтобы увидеть
стили (рис. 19.11).
Эта методика создаст встроенный CSS. Так-
же вы можете использовать внешние CSS-
файлы, а затем с помощью GoLive добавить
ссылку на вашу Web-страницу.
Настройка и добавление ссылки
на внешний CSS-файл
1. Откройте HTML-документ, с которым
вы работали в предыдущем задании.
Нажмите кнопку CSS. Откроется CSS-
редактор.
This is en example text for inlinestyles This is aneiample
text for inline styles A ppll С* I tO 11)1 UK'The is
an «ample text for inline styles This is an «ample text for
inline styles
In thi< pin ntT.ipli you the
style.- applied to ,1 block' In tlu-
paunjaph yui че the style
applied to <> bloek In this
paiii-jiipli y>n <ee (lie -l\le
applied to a bloek In tin»
pinnaupli yi-u see the le
applied to и block
This is plam text to have a third paragraph This is plam text
lo have a thud paragraph. This is plam text to have a thud
paragraph This is plam text to have a thud paragraph This
is plam text to have a thud paragraph
Рис. 19.10. Применение стилей с помощью CSS-
редактора. Обратите внимание на функцию
обновления на нижней панели; эта функция
показывает вам, как должен выглядеть стиль
Рис. 19.11. Просмотр стилей и кодировки
источника с встроенным стилем
Reference ': [*Jtest css
Relation ] stylesheet »I
Type | text/css
MedU |ai 2j
Title |
Document _Ф |
Create |
tn 8, Out Unfa |
Рис. 19.12. Создание внешней таблицы стилей
Внедрение CSS в Web-страницу |4311
2. На правой панели нажмите кнопку Со-
здать ссылку на внешнюю таблицу
стилей (Create a Reference to an External
Style Sheet File). Редактор позволит вам
ввести информацию из внешней таб-
лицы стилей.
3. В текстовом поле Ссылка (Reference)
введите имя CSS-файла; в данном при-
мере это test. css. Также вы можете из-
менить тип среды и другие функции.
Если вы не уверены в том, как нужно
вносить изменения, лучше оставьте
все как есть (рис. 19.12).
4» Нажмите кнопку Создать и сохраните
вашу таблицу стилей.
5. Выберите тип CSS-селектора в CSS-pe-
дакторе: элементы маркировки, класс
или ID. Новый элемент стиля появится
в окне определений CSS. Введите имя
элемента.
6. С помощью CSS-редактора настройте
определения стиля.
7, Сохраните файл. Теперь HTML-файл
может обращаться к стилям во внеш-
нем файле.
8. Повторите действия, описанные в пунк-
тах 1-5, для всех внешних таблиц сти-
лей, которые вы желаете добавить.
I _“1 При написании классов стилей вам не сле-
дует использовать прописные буквы. Так
'---’ вы сможете избежать конфликтов между
браузерами, особенно при использовании
XHTML, который требует, чтобы имена
всех элементов и атрибутов были записа-
ны строчными буквами. Если в таблице
стилей, которая используется с XHTML-
документом, у вас есть селектор пропис-
ных букв, например Н1, то ваши стили ин-
терпретироваться не будут.
[4321 Знакомство c GoLive
Как изменить свойства с помощью
CSS-редактора
CSS-редактор предоставляет вам мгновен-
ный доступ к разнообразным свойствам
стиля. После создания селектора вы може-
те применить к нему стили с помощью
следующих вкладок в CSS-редакторе:
Selector and Properties. Эта вкладка
целиком показывает CSS-правило, ко-
торое вы редактируете. На этой вклад-
ке вы можете напрямую вносить из-
менения как в селектор, так и в свой-
ства (рис. 19.13);
Font properties. Измените свойства
шрифта (как показано в главе 3) для
выбранного селектора (рис. 19.14);
Text properties. Измените для вашего
элемента свойства текста, выравнива-
ние, кернинг и прочие, как показано в
главе 4 (рис. 19.15);
Block properties. С помощью этих
свойств (как показано в главах 5, 6 и 7)
вы можете определить размеры и поло-
жение заданного элемента (рис. 19-16);
Margin and Padding properties. Добавь-
те для вашего элемента поля и залив-
ку, как описано в главе 5 (рис. 19.17);
Border and Outline properties. Добавьте
границы элементов с помощью пара-
метров, описанных в главе 5 (рис. 19.18);
List Item and other properties. С помо-
щью данной вкладки вы можете изме-
нить списки и другие стили отображе-
ния, как показано в главе 8 (рис. 19-19);
Background properties. Здесь вы може-
те добавить фоновый рисунок, поло-
жение, эффекты, а также изменить фо-
новый рисунок для вашего элемента,
как показано в главе 5 (рис. 19.20).
Р ----------
- Selector. . | h l ;
. Comment. ] «
| Property | I | Value | Comment
CJ border-bottom ipxsoiidaqua *1
.4 color gray
4-j SSEB8ES3 22px
11--.......I
Рис. 19.13. Режим просмотра CSS-редактора,
селектора и свойств
ЭГИИЛШа]
Color ИИЕ > | style I Unchanged 2
Back color р—w ....
3ze 122px У | Wretch I Unchanged » I
Lme Height | »J Decoration л| 4(м|%l|
FontFamfy | Fpnt Preview
Рис. 19.14. Закладка Font Controls
Рис. 19.15. Закладка Text Controls
Внедрение CSS в Web-страницу [~433~|
[-у | д |\£Г; +" [3 (□ |а ПзТ
Width 112рх ► | Float | Right 3
Height I ► I Clear (unchanged 3
VfcibsSty | Unchanged 3
j Position | Cfotfng j Mn and Max (
Position [Absolute Z-Index |
TOP I 3
Rtf* | jj
Bottom | 3
Left | »|
Рис. 19.16. Вкладка Block properties
T * i ' I а Гд- ~f
Рис. 19.19. Вкладка List Item and other properties
1-.ЛГЛ |я |ч- i ta | □ |tn | a I |>--|'Л7(-!1д Jcj.g I-
Margh Al | multiple 3 Packing Al |12px 3 Backgrocxvi Image | Inherit 1
T°P 1 3 Right | 3 •Bottom^Jo » | . left Jo 3 Top 112px 3 Right j 12px »| Bottom (12^ 3 Left Пгрх 3 . Ы Jld Color Horizontal | _д| Vartoa! | 'J Repeat | Repeat x -1 Attach | Scroll jJ
Рис. 19.17. Вкладка Margin and Padding properties
Рис. 19.20. Вкладка Background properties
[ Border"['-'<X^na
AB | multiple 3 I “3 । 3
Top Г 3 I 3 lUnchan9ed 3
Right | 3 I / '3 Unchanged 3
Bottom i—] Solid * I
Left | 3 I S '3 lUnchanged 3
Рис. 19.18. Вкладка Border and Outline properties
[434]
Знакомство с GoLive
Создание слоя
Ранее было показано, как определить CSS-
слой, превратив обычный элемент в объект
(см. раздел «Создание объекта» в главе 10).
GoLive рассматривает CSS-слои как плаваю-
щие блоки, но тем не менее эти два поня-
тия идентичны.
Добавление CSS-слоя
на Web-страницу
1. В режиме разметки страницы в окне
документа дважды щелкните по кноп-
ке Floating Block (Плавающий блок)
в палитре Object (Объект) - рис. 19.21.
Теперь этот слой появится в окне доку-
мента как пронумерованный прямо-
угольник. Числа расположены в по-
рядке создания слоев.
2. Переместите курсор к любому краю слоя
таким образом, чтобы стрелка смени-
лась изображением руки (рис. 19.22). За-
тем нажмите кнопку мыши, чтобы вы-
делить или перетащить объект в любое
место на экране.
3. Для изменения размера выделенного
блока перетащите один из манипулято-
ров, расположенных в каком-либо из его
углов (рис. 19.23).
Рис. 19.22. Вы можете выделить весь слой,
щелкнув мышью по одной из его границ
Го“ а
а а
ш А
j\? а
а
Ц? Ю
та
. Layer]
Q
. <’)
а —
;£>
а ksO
\ 4,
<?>
Рис. 19.21. Добавление слоя
из палитры Объекты
Рис. 19.23. Если слой выделен, легко изменять
его ширину или высоту при помощи одного
из манипуляторов
Создание слоя 14351
Рис. 19.24. При выделении слоя в режиме
разметки страницы палитра Inspector позволяет
изменять свойства слоя
Изменение свойств CSS-слоя
1. Выделив слой в режиме разметки стра-
ницы, при помощи палитры Inspec-
tor настройте необходимые свойства
(рис. 19.24). Палитра Inspector вклю-
чает и элементы управления анима-
цией (см. следующий раздел).
2. Введите имя слоя, которое будет ис-
пользоваться как уникальный 1D в CSS.
3. Укажите координаты верхнего левого
угла слоя.
4. Задайте высоту и ширину слоя (см. раздел
«Ширина и высота элемента» в главе 5).
5. Впишите глубину слоя для объектов
с z-индексом (см. главу 6).
6. Определите, будет ли слой видимым
(см. «Определение видимости элемента»
в главе 7).
7. Чтобы настроить цвет фона или рисун-
ка, щелкните по вкладке Background на
палитре Inspector (рис. 19.25).
Помните, что CSS-слой - это объект, кото-
рому присвоен уникальный ID с определен-
ным типом расположения. CSS-слой обыч-
но заключается в теги <div> или <span>.
По умолчанию положение слоя задано
в абсолютных координатах. Но вы можете
задать положение и в относительных коор-
динатах с помощью палитры Inspector.
[1
• Рис.19.25. Вы можете использовать вкладку
Background на палитре Inspector, чтобы изменить
цвет и рисунок фона для выбранного слоя
и
Знакомство с GoLive
Создание DHTML-анимации
Ранее был затронут вопрос создания обыч-
ной поточечной анимации (см. раздел
«Анимационные объекты» в главе 15).
Данный способ очень эффективен для пе-
ремещения простого объекта по прямой,
но более сложные способы анимации луч-
ше создавать при помощи программ, по-
добных GoLive. Дело в том, что вычисле-
ния, необходимые для создания сложной
анимации, достаточно громоздки и их
трудно добавлять в код самостоятельно.
В следующем примере вводится пять но-
вых слоев, каждый из которых содержит
по одной букве из слова Alice (рис. 19.26).
После запуска анимации буквы, переме-
щаясь по странице, должны составить
имя ALICE.
Создание анимации в GoLive
1. Установите CSS-слой (см. раздел «Со-
здание слоя») и поместите в него какое-
либо содержимое. Убедитесь в том, что
палитра Inspector открыта на вкладке
Timeline (рис. 19.27).
2. Выделив слой, нажмите на кнопку Time-
line (Временная шкала) в верхнем пра-
вом углу окна документа, между кноп-
ками CSS и JavaScript. Откроется окно
редактора Timeline Editor (рис. 19.28).
Рис. 19.26. Буквы начинают перемещаться
по экрану, придерживаясь заданной траектории,
и образуют имя ALICE
Рис. 1928. Так будет выглядеть окно редактора
DHTML Timeline, когда вы откроете его в первый раз
Создание DHTML-анимации [437]
3. Не снимая выделения со слоя, в режиме
разметки страницы в палитре Inspector
выберите кривую линию из ниспадаю-
щего меню Animation (Анимация).
Затем нажмите на кнопку Record (За-
пись) - рис. 19.29.
4. Переместите объект по произвольной
траектории (рис. 19.30). В окне редак-
тора временной шкалы вы увидите
прямоугольник, в котором будет ука-
зана каждая точка траектории движе-
ния (рис. 19.30). Эти точки называют-
ся опорными кадрами.
5. Повторите шаги 1-4 для каждого слоя
анимации.
Когда страница загружена в Web-браузер,
слои должны перемещаться заданным об-
разом (рис. 19.31).
1»Г CSS Маге» \Т«Ыв Ajiirary '’WbJ
Рис.19.29. Выберите искривленный путь и
запишите вашу анимацию
: -: Орел Tgnefrw Edtor. |
Рис. 19.30. Просмотр анимации в редакторе
DHTML Timeline
Рис. 19.31. Результаты, полученные после
выполнения анимации
DMflmwm
HIX 2004 «
20
Dreamweaver начал свое существование как
визуальный редактор для Web-разработчи-
ков и постепенно интегрировал все больше
и больше инструментов для языков клиен-
та и сервера, включая HTML, XHTML,
скрипты и, конечно, CSS. Изначально он
рассматривался как программа WYSIWYG,
которая с помощью дополнительного
программного обеспечения обеспечивала
функциональность для HTML-редактиро-
вания. Но эта ситуация изменилась. После
выхода последней версии, Dreamweaver
MX 2004, программа стала одним из лиде-
ров в сфере Web-дизайна и инструментов
разработки. Dreamweaver включает визу-
альное редактирование, языки для сервера,
редактирование сервера, а также обшир-
ную поддержку Web-стандартов.
Dreamweaver MX 2004 интегрирует и другие
инструменты и.утилиты, например, управ-
ление FTP и сайтами, и позволяет вам со-
здавать шаблоны, которые упрощают об-
новление вашего сайта. Кроме того, благо-
даря тому, что компания Macromedia явля-
ется разработчиком Flash MX, Dreamweaver
включает несколько инструментов, позво-
ляющих вам добавлять Flash-текст и кноп-
ки, даже если у вас нет Macromedia Flash (см.
раздел «Flash и DHTML» в главе 9).
В этой главе мы покажем вам, как на-
страивать CSS с помощью инструментов
Dreamweaver, работать с новыми функ-
циями Dreamweaver (например, шабло-
нами CSS) и использовать Tag Inspector
для более эффективной работы с CSS.
Рис. 20.1. Окно Dreamweaver в режиме разметки
страницы. Этот режим позволяет добавлять новые
элементы и менять положение существующих,
как в текстовом процессоре
Рис. 20.2. Dkho Dreamweaver в режиме просмотра
исходного кода. Вы можете напрямую редактировать
исходный код (HTML, JavaScript и CSS)
Интерфейс Dreamweaver 14391
Интерфейс Dreamweaver
Macromedia усердно работала над превра-
щением Dreamweaver из DHTML-генера-
тора в полноценную программу для раз-
работки Web-приложений. И усилия увен-
чались успехом: компания достигла впе-
чатляющих результатов. Если ранние
выпуски ее программного обеспечения
были неудачными по причине отсутствия
совместимости с WYSIWYG-редакторами,
то уже в последних версиях выпускаемых
программ этот недостаток был устранен.
В программе Dreamweaver используется не-
сложный режим разметки страницы, кото-
рый позволяет добавлять, двигать и уда-
лять объекты непосредственно на страни-
це, в то время как редактор генерирует со-
ответствующий HTML-код. Но вы также
можете и сами редактировать HTML-код.
Окно документа
Окно документа предназначено для со-
здания Web-страниц и работы с кодом.
Используя кнопки, расположенные в верх-
ней части окна, нетрудно переключаться
между следующими режимами отображе-
ния документа:
Layout view (Режим разметки страни-
цы). Работа в этом режиме сходна с ра-
ботой в текстовом редакторе. Вы може-
те просмотреть страницу в том виде,
в каком она будет выведена в окне брау-
зера, а также позиционировать и изме-
нять элементы (рис. 20.1);
Source view (Просмотр исходного кода).
Данный режим позволяет напрямую ра-
ботать с HTML-тегами Web-страницы
(рис. 20.2);
14401 Dreamweaver MX 2004 Primer
Source and Layout view (Совмещенный
режим разметки страницы и исходного
кода). В этом режиме окно документа
разделено на две части, что позволяет
одновременно работать и с кодом, и со
страницей в режиме разметки. Измене-
ния, которые вы вносите в одно из полей,
отображаются и в другом (рис. 20.3).
Панель Property Inspector
Панель свойств позволяет контролировать
все атрибуты объекта, выделенного в окне
документа. На ней располагаются кнопки
для быстрого вызова наиболее часто ис-
пользуемых тегов и стилей, которые мож-
но применить к выделенному объекту.
Кроме того, с помощью панели свойств вы
можете вводить поля, предназначенные
для установки свойств элементов.
Набор опций, представленных на панели
свойств, изменяется в зависимости от того,
какой элемент выделен. Например, при ре-
дактировании текста вы видите инстру-
менты для определения уровня заголовка,
разметки страницы, изменения парамет-
ров шрифта и т.д. (рис. 20.4). При выделе-
нии слоя на панели отобразятся инстру-
менты для изменения его размера, распо-
ложения и видимости (рис. 20.5).
Рис. 20.3. Окно документа Dreamweaver в режиме
Split. Здесь вы можете работать с дизайном или
кодировкой и видеть результаты в другом окне во
время внесения изменений
ijgiiSa....3 -------Э'ЛИ'ШЙЩ г**Г---------------------------34J g
Рис. 20.4. Панель свойств изменяет набор отображаемых опций в зависимости от того, какой элемент
выделен в окне документа, на рисунке показана панель при выделении текста
Ч-Л.. ' . .
• 1$^1 L***® S;394px J-Index f 1 Bgrnaee[wr/im»5es/wow-ed-logo.gf' О Sms | None 3 Ц
zj. l3ipx“ afaMpx Bsjdefadt 3 ' Bgsptor r~j;*~FFCC99 ~~
Рис. 20.5. На рисунке показана панель свойств при выделении слоя
Интерфейс Dreamweaver 1441
Группы панелей
Design. Эта панель предоставляет мгно-
венный доступ к информации CSS,
включая опции редактирования CSS и
Layer;
Code. На этой панели доступны коди-
ровки HTML и JavaScript. Также здесь
вам доступно содержимое справочной
информации;
Tag Inspector. Эта полезная панель (усо-
вершенствованная для Dreamweaver MX
2004) включает три важные области:
Attributes показывает атрибуты выб-
ранного тега, Behaviors отображает лю-
бые действия, связанные с выбранным
тегом, Relevant CSS показывает все
CSS-стили, примененные к выбранно-
му элементу;
Files. Открыв панель Files, вы всегда
сможете увидеть расположение раз-
личных файлов на вашем сайте. Также
вы можете идентифицировать и изме-
нять ваши ресурсы с помощью данной
панели.
Инструменты CSS в Dreamweaver
Dreamweaver предлагает вам все необхо-
димые инструменты для Web-редактиро-
вания, включая проверку правописания,
кода и ссылок. Кроме того, Dreamweaver
может создавать большое количество до-
кументов с помощью различных языков
как клиента, так и сервера.
Dreamweaver MX 2004 внес существенные
изменения в область поддержки CSS. Вот
некоторые новые функции:
улучшенное CSS-рендерирование в ре-
жиме Design. В прошлом Dreamweaver
ограничивал поддержку CSS в данном
режиме. Теперь программа может под-
держивать намного более точное CSS-
рендерирование. Эта поддержка не иде-
альна, так как ряд эффектов (например,
«задержка» курсора мыши) не отобра-
жается, но, безусловно, это шаг в пра-
вильном направлении;
CSS-форматирование по умолчанию.
В прошлом Dreamweaver использовал
для форматирования текста теги < f о n t >
и другие теги (связанные с визуальным
отображением). Вы можете изменить
настройки Dreamweaver, чтобы он ра-
ботал таким же образом, но сейчас про-
грамма использует CSS для визуализа-
ции, что является оптимальным выбо-
ром. Благодаря тому, что Dreamweaver
MX по умолчанию использует CSS (а не
теги) для визуализации, вы можете
приблизить ваши документы к стан-
дарту и упростить свою работу;
шаблоны CSS. Помимо шаблонов доку-
ментов, Dreamweaver MX 2004 предлага-
ет ряд дизайнов CSS, которые вы можете
модифицировать для ваших задач. За
дополнительной информацией обра-
щайтесь к разделу «Работа с шаблонами
CSS в Dreamweaver» далее в этой главе;
Tag Inspector/Relevant CSS. Вкладка
Relevant CSS на панели Tag Inspector
мгновенно показывает вам, какие сти-
ли были применены к даниому элемен-
ту. Также из данной вкладки вы можете
вносить изменения в стили.
Dreamweaver MX 2004 Primer
Внедрение CSS
В первой части этой книги были рассмот-
рены способы добавления таблиц стилей
на Web-страницы. Dreamweaver включает
в себя ряд инструментов, которые помога-
ют избавиться от монотонной, рутинной
работы по созданию и настройке таблиц
стилей. Вы можете использовать Dream-
weaver, чтобы внедрить CSS в отдельную
Web-страницу или даже в целый Web-сайт.
Внедрение CSS в Web-страницу
1. Создайте новый или откройте уже суще-
ствующий HTML-файл, выбрав в меню
пункты File Ф New (Файл Ф Создать)
или File Ф Open (Файл Ф Открыть).
2. В палитре стилей CSS щелкните по кноп-
ке New Style (Создать стиль) - рис. 20.6.
Если палитра не открыта, выберите пунк-
ты Window Ф CSS styles (Окно Ф CSS-
стили). Откроется диалоговое окно New
Style (Создать стиль) - рис. 20.7.
3. Выберите типы CSS-селектора, кото-
рые будете использовать. Если вы хо-
тите добавить класс, отметьте пункт
меню Make Custom Style (class) -
Создать собственный класс. Для при-
своения ID задайте опцию Redefine
HTML Tag (Переопределить HTML-
тег) или Use CSS Selector (Использо-
вать CSS-селектор).
1 ▼ Design E.
Гrss
I (no styles... ;
Рис. 20.6. Палитра CSS Styles отображает все
доступные в текущем документе классы (на этом
рисунке нет доступных классов)
Tejr 3 | (Ж |
Setedwlype; Г O«s (con «ppty to «г» tag) .Cancel |
ь[ад(redeftiesthe lodcof a soecfictaqjl
f advanced (IDs, contextual reietws, etc)
Defined: tf j(New St^le Sheet Fie)
О THe docunent ortr Help [
Рис. 20.7. Диалоговое окно New Style позволяет
выбрать тип добавляемого стиля, а так же указать
место его размещения - во внешнем файле
или нет
Внедрение CSS '|443j
Рис. 20.8. Диалоговое окно CSS Style Definition
можно рассматривать как первичный интерфейс
для CSS-редактирования в Dreamweaver
4. Нажмите на кнопку This Document
Only (Только этот документ), чтобы
включить созданный вами стиль в тег
<stу 1е>, затем щелкните по кнопке ОК.
5. В окне определения стиля выставьте
только те определители CSS, которые
будете использовать (рис. 20.8). Вы мо-
жете в любой момент щелкнуть по
кнопке Apply (Применить), чтобы вой-
ти в окно документа и посмотреть, ка-
кие изменения внесены.
6. После определения CSS-правила на-
жмите на кнопку ОК, чтобы вернуться
в окно документа.
Теперь в документ будет добавлена вся
информация о стиле. Помните, что
стили относятся только к текущему
документу.
Процесс добавления новых внешних таб-
лиц стилей схож с добавлением стиля к
странице. Dreamweaver автоматически на-
страивает и проверяет связи.
14441 Dreamweaver MX 2004 Primer
Присоединение внешнего
CSS-файла
1. Создайте новый или откройте уже су-
ществующий HTML-файл.
2. В палитре CSS Styles нажмите на кноп-
ку New Style (Создать стиль). Откроет-
ся диалоговое окно.
3. Выберите типы CSS-селектора. Для при-
своения ID укажите опцию Redefine
HTML Tag (Переопределить HTML-тег)
или Use CSS Selector (Использовать
CSS-селектор).
4. Удостоверьтесь, что выделена кнопка,
находящаяся рядом с пунктом Next Sty-
le Sheet File (Следующий файл с табли-
цами стилей).
5. Откроется диалоговое окно Сохранить
файл с таблицей стилей как (Save Style
Sheet File As). Введите имя для CSS-фай-
ла, обязательно включив в имя расши-
рение .css.
6. Настройте те опции CSS, которые вы
будете использовать. С помощью кноп-
ки Apply вы можете в любой момент
войти в окно документа и посмотреть,
какие изменения внесены.
7. После определения CSS-правил нажмите
на кнопку ОК, чтобы вернуться в окно
документа.
8. При настройке класса используйте па-
литру CSS Style, чтобы установить
класс для выделенного объекта в окне
документа.
И Dreamweaver не позволяет добавлять клас-
сы, таким образом, имеются только стан-
дартные классы. Однако допускается добав-
лять правила классов непосредственно в
окне редакторе кода.
Внедрение CSS 14451
Рис. 20.9. Настройка типов стилей с помощью
окна CSS Style Definition
Рис. 20.10. В категории Фон вы можете настроить
ряд параметров для фона, например, цвет,
рисунок и поведение рисунка
CSS-редактор
При добавлении или создании правил CSS
Dreamweaver требует использования CSS-
редактора для ввода значений каждого
правила. CSS-редактор состоит из следую-
щих страниц (чтобы переключаться меж-
ду страницами, выберите соответствующее
название из списка в левой части окна):
Туре (Тип). На этой странице устанав-
ливаются атрибуты шрифта (рис. 20.9);
Background (Фон). Здесь настраивают-
ся свойства фона элемента (рис. 20.10);
Block (Блок). Отсюда можно задать
свойства абзацев (рис. 20.11);
Box (Поля и внутренние отступы). Эта
страница предназначена для указания
полей элемента и внутренних отступов
(рис. 20.12);
Рис. 20.11. Категория Блок позволяет вам
настраивать кернинг, выравнивание, отступ, поля
и стиль отображения
Рис. 20.12. Категория Поле позволяет вам
управлять шириной, высотой, свободным
перемещением, заливкой и стилями полей для
элемента
14451 Dreamweaver MX 2004 Primer
Border (Рамка). Здесь настраивается вид
рамки элемента (рис. 20.13);
List (Список). С этой страницы вы може-
те установить вид списков (рис. 20.14);
Positioning (Положение). Элементы
управления данной страницы позво-
ляют определить положение объекта
(рис. 20.15);
Extensions (Дополнительно). На этой
странице расположены элементы управ-
ления настройкой дополнительных
свойств, зависящих от типа браузера,
под который оптимизируется страни-
ца, - например, cursor и т.п. (рис. 20.16).
Рис. 20.14. Эффективно управляйте списками из
категории Список в окне CSS Style Definition
Рис. 20.15. Позиционирование предлагает вам
большое количество стилей, которые позволяют
помещать элемент на странице и управлять
функциями позиционирования
Рис. 20.13. Здесь мы используем категорию Граница,
чтобы создать штрихованную правую границу
толщиной в 1 пиксель для выбранного элемента
Рис. 20.16. Категория Расширения включает ряд
нестандартных функций, которые встречаются в
некоторых Web-браузерах
Создание дополнительного слоя |447|
Рис. 20.17. Перетаскивая пиктограмму Draw Layer
из палитры Objects в окно документа, вы
добавляете слой к Web-странице
Рис. 20.18. Чтобы выделить слой, щелкните
по любой из его границ
Создание
дополнительного слоя
Вы создаете CSS-слой, присваивая объекту
ID и определяя его местоположение на стра-
нице (абсолютное или относительное) при
помощи тега <div> (см. раздел «Создание
объекта» в главе 10). Dreamweaver обеспечи-
вает простой доступ к управлению слоями.
Добавление слоя на Web-страницу
1. Находясь в режиме разметки страни-
цы в окне документа (или в режиме
просмотра исходного кода и разметки
страницы), перетащите пиктограмму
Draw Layer (Добавить слой) из палитры
Objects в окно документа (рис. 20.17).
Добавленный слой появится в окне до-
кумента в виде прямоугольника.
2. Переместите указатель мыши к любому
краю слоя (рис. 20.18). Вы можете щелч-
ком мыши выделить этот слой или пе-
редвинуть его в любое место экрана.
3. Чтобы изменить размер выделенного
слоя (прямоугольника), перетащите
один из маркеров, находящихся в уг-
лах выделенной области (рис. 20.19).
Рис. 20.19. Вы можете изменять ширину и/или
высоту слоя, перемещая маркер на нужной стороне
14481 Dreamweaver MX 2004 Primer
Изменение свойств CSS-слоя
1. Выделив слой в окне документа, исполь-
зуйте панель свойств для доступа к его
свойствам (рис. 20.20).
2. Введите имя этого слоя. Оно будет ис-
пользоваться аналогично ID CSS-объекта.
3. Укажите координаты левого верхнего
угла слоя.
4. Задайте высоту и ширину слоя (см. раз-
дел «Ширина и высота элемента» в гла-
ве 5).
5. Введите z-индекс слоя (см. раздел «Эле-
менты в порядке стека (ЗВ-позициони-
рование)» в главе 6).
6. Устанбвите видимость данного слоя
(см. раздел «Определение видимости
элемента» в главе 7).
7. Укажите цвет фона или фоновое изоб-
ражение (см. главу 5).
8. Если вы желаете задать стиль класса
для слоя, выберите его в ниспадающем
меню Класс.
9. Определите тип тега, используемого
слоем. Обычно применяется <div>
или <зрап>, но допустимы и
Netscape-тег (для Netscape 4) <1ауег>
или <ilayer>. По умолчанию он соот-
ветствует <div>, что более предпочти-
тельно.
10. Установите левый, верхний, правый
и ниж иий края отсекаемой области,
если это возможно. Затем укажите,
каким образом должна обрабатывать-
ся невидимая часть (см. разделы «Оп-
ределение видимой части элемента»
и «Управление невидимой частью» в
главе 7).
И Dreamweaver располагает все CSS-слои
в теге <div>, предпочитая это расстанов-
ке 1D в теге <style>. Я считаю наиболее
удобным способом определение ID в теге
<style> или добавление его из внешнего
файла, но метод, используемый Dream-
weaver, также имеет право на жизнь. Вы
всегда можете удалить CSS и добавить его
вручную во вложенную или внешнюю таб-
лицу стилей.
"3 I I 149рх й 3ilpx Bs | default 3 Bpgilor |~j
$
Рис. 20.20. Панель свойств обеспечивает доступ к свойствам слоя, контролируемым CSS
Работа с CSS-шаблонами в Dreamweaver [4491
Работа с CSS-шаблонами
в Dreamweaver
Одно из интересных нововведений в
Dreamweaver MX 2004 - это CSS-шаблоны.
Вы можете использовать эти шаблоны для
мгновенной настройки стилей в докумен-
те либо изменять их в соответствии с ме-
тодиками, описанными ранее в этой главе,
для создания нового дизайна документа.
Шаблоны сгруппированы в следующие
категории:
Basic. Базовые шаблоны CSS, которые
стилизуют вашу страницу с помощью
определенного шрифта;
Colors. С помощью этих шаблонов вы
можете изменить цветовую палитру
вашей страницы;
Forms. CSS можно использовать для
стилизации форм так эффективно, как
и не могли себе представить HTML-ди-
зайнеры. Dreamweaver MX 2004 включа-
ет даже один шаблон, который специ-
ально предназначен для работы с опци-
ями доступа;
Full Design. Этот шаблон включает
стили для всех объектов страницы, на-
чиная от абзацев и таблиц и заканчи-
вая формами;
Link Effects. Этот шаблон определяет
эффекты ссылок, которые вы можете
использовать для улучшения внешне-
го вида вашего документа;
Text. Как и шаблоны Basic, эти шаб-
лоны стилизуют страницу с помощью
шрифтов;
15 Тяге Дж. К.
1450| Dreamweaver MX 2004 Primer
Page Designs (CSS). Эти шаблоны ин-
тегрируют CSS для работы с дизайном.
Вы можете создавать сложные дизай-
ны, просто прикрепляя одну из таблиц
стилей к вашему документу и приме-
няя стили. Сами дизайны могут потре-
бовать небольшой правки, но шабло-
ны помогут вам научиться использо-
вать CSS для дизайна. Вы увидите, как
сильно способны изменения шаблонов
повлиять иа внешний вид страницы и
ее восприятие.
Вы уже знаете, как связывать ссылками
таблицы стилей и страницы. Мы предлага-
ем пойти дальше и попробовать порабо-
тать с несколькими шаблонами. В следую-
щем упражнении мы займемся дизайном
CSS-страницы и внесем ряд простых изме-
нений. Вы увидите, как можно использо-
вать инструменты Dreamweaver CSS и но-
вые шаблоны в различных вариантах.
Создание дизайна с помощью
шаблона Dreamweaver CSS
1. Чтобы работать с шаблонами страниц,
вам нужно сначала указать ваш сайт.
В этом примере мы назвали сайт «CSS
Tests» и настроили сайт для локальной
работы.
2. Выберите пункты меню Файл Ф Со-
здать. В окне Новый документ выбе-
рите иа панели Категории пункт Page
Designs (CCS) - рис. 20.21.
3. Доступные шаблоны отобразятся на
центральной панели. Выберите пункт
Два столбца, навигация слева и на-
жмите кнопку Создать.
Рис. 2021. Выберите шаблон полной страницы
CSS. В данном случае это дизайн из двух столбцов
с навигацией слева
Рис. 2022. Скопируйте файл шаблона туда, куда
вы сохраняете ваш дизайн
Рис. 20.23. В режиме Design показана ноеая
страница, созданная с помощью шаблона
Работа с CSS-шаблонами в Dreamweaver |451~|
H font-size
Д1 color
I? font-family
** font style
^bne height
V font weight
« text transform
fort variant
text decorab
font
100%
#334d55
background-c..
background-t.
back^ound-a.
word-spacing
letter-spacing
feZ text aign
.4 vertical align
Ш text indent
m white-space
Ч
ч
11,
|й border
| border-top-co.
| border-top-st.
| border-top-vt..
gborder-nght-..
ь border right
border right
iborder-botto..
Iborder-botto..
border-botto..
border-left-со..П
вш
□
4. Dreamweaver попросит вас сохранить
HTML-документ. Введите имя доку-
мента («css-test.html») и нажмите кноп-
ку Сохранить.
5. Откроется диалоговое окно Копировать
зависимые файлы (рис. 20.22). Будет
создана ссылка между таблицей стилей и
вашим документом. Нажмите кнопку
Копировать.
6. Дизайн страницы загрузится в режиме
Design (рис. 20.23).
Как видите, страница готова для добавле-
ния текста и графики и уже включает чис-
ловые функции, которые применяются
большинством Web-сайтов. Что если вам
не нравятся цвета, границы и дизайн эле-
ментов страницы? Не волнуйтесь, - вы мо-
жете изменить дизайн с помощью вкладки
Relevant CSS на панели Tag Inspector.
Изменение дизайна шаблона
1. Открыв документ css-test.html> открой-
те панель Tag Inspector и щелкните по
вкладке Relevant CSS (рис. 20.24).
2. Вкладка Relevant CSS имеет два режи-
ма: режим Категория показывает CSS-
стили по категории, а режим Список
показывает список стилей. Нажмите
кнопку Режим показа категорий.
3. Щелкните один раз по документу, и па-
нель Relevant CSS отобразит стили, при-
мененные к выбранному вами элементу.
Нажмите кнопку Имя сайта, чтобы про-
смотреть стили для данного заголовка.
Рис. 20.24. Воспользуйтесь eкладкой Relevant CSS
на панели Tag Inspector
14521 Dreamweaver MX 2004 Primer
4. Убедитесь в том, что категория Шрифт
открыта на вкладке Relevant CSS. Чтобы
изменить свойства цвета шрифта, щелк-
ните по полю цвета, чтобы открыть
панель выбора (рнс. 20.25).
5. Щелкните по цвету, и элемент будет
обновлен с учетом данного цвета.
В этом примере мы использовали тем-
но-красный цвет, #660000.
6. Чтобы избавиться от границ панели
навигации, щелкните по панели один
раз. На панели имеется несколько се-
лекторов, поэтому для изменения функ-
ции вам понадобится найти нужный.
7. В категории Граница найдите пара-
метр для правой границы. Щелкните
по стилю один раз, затем удалите его.
При этом будет удалена правая грани-
ца панели навигации.
8. Повторите эти действия для нижней
границы, чтобы убрать ее панель нави-
гации.
Продолжайте изменять параметры; вы
можете даже добавлять к элементам фо-
новую графику. Вы увидите, что исполь-
зование CSS-шаблона страницы в комби-
нации с вашими идеями поможет вам в со-
здании профессиональных Web-страниц.
body : <body>
/masthead _i <cfiv>
hl, h2, h3. h4.. <hl>
ЙИМ
/siteName <hl>
Рис. 2025. Внесите изменения в таблицу
стилей с помощью вкладки Relevant CSS
own w
21
Если для создания Web-страниц вы ис-
пользуете CSS и DHTML, рано или поздно
в программах начнут возникать ошибки.
Подобных проблем не избежать, так же
как смерти и налогов.
Я протестировал код, приведенный в этой
книге, в различных браузерах и опера-
ционных системах, и надеюсь, что в нем
нет ошибок. Но вам придется изменять
код, выбирая другие переменные, значе-
ния, URL и стили. Вы можете совмещать
код из различных примеров или созда-
вать собственные функции.
Так или иначе это приведет к возникно-
вению ошибок.
В данной главе описаны наиболее общие
ошибки, возникающие в кодах, рассказа-
но, как быстрее их обнаружить и устра-
нить. Надеюсь, что смогу удержать вас от
попытки разнести монитор, если что-то
не будет получаться.
Помните, что вы можете загрузить все лис-
тинги примеров данной книги по адресу:
www.webbedenvironments.com/dhtml.
14541 Отладка кода
Обнаружение ошибок CSS
Вы аккуратно определяете правила табли-
цы стилей, запускаете браузер и... не ви-
дите никаких результатов! Не беспокой-
тесь, такое случается с каждым.
Проверка кода
Существует множество различных вариан-
тов ответа на вопрос, почему программа не
работает. Большинство ошибок, приводя-
щих к тому, что определенные вами CCS-
правила не функционируют, очень легко
вычислить. На рис. 21.1 показаны наиболее
часто встречающиеся ошибки.
Чтобы отыскать ошибку в определении
CCS-правил, необходимо проверить сле-
дующее:
все ли определенные вами свойства под-
держиваются вашим браузером и опера-
ционной системой. Многие свойства не
поддерживаются Internet Explorer и/или
Netscape, что зависит от используе-
мой операционной системы. В прило-
жении А указана совместимость тех или
иных свойств с браузером и ОС;
нет ли в применяемом вами селекторе
опечаток. Если вы не поставили в нача-
ле определения класса или ID открыва-
ющий знак или знак #, правило не бу-
дет работать. Помимо этого, следует
избегать подчеркивания в именах ID
или классах, так как Netscape 4 не вос-
принимает подчеркивание;
<html>
<head> I
<link scr="myStyles.css">
<style>
Правильный URL?
Netscape 4 не воспринимает
подчеркивание
Пропущен знак
определения класса
Здесь должно быть
слово font
body { font-size: 1 брх}
mylclass { cursor: pointer;
-------------fant-family: times
font-size: bold;------------------------
}
Cursor не работает
в Netscape 4
bold - это не размер шрифта
Г
This style shoud be used with
paragraphs of text
Пропущено */ ------
.copy{ font-size: 12px--------- пропущено}
<Style>---------------------- Пропущено/
</head>
<body>
<p clasS="COpy“>-------------- Это будет 12 пикселей или 16?
Howdy!
Пропущено </р> -----
<body>
Рис. 21.1. На рисунке представлено несколько самых распространенных ошибок, возникающих
при использовании CSS
указанные значения используются с
соответствующими свойствами. При-
менение неверных значений может
привести к ошибке или непредсказуе-
мым результатам;
не пропустили ли вы точку с запятой.
Если вы не поставили в конце опреде-
ления точку с запятой, CCS-правило не
будет работать;
все определения были начаты н закон-
чены фигурной скобкой. Чаще всего
пропускают именно фигурную скобку;
все многострочные теги комментариев
были закрыты. Если тег не закрыт, то
оставшаяся часть CSS-кода рассматри-
вается как комментарий (см. раздел
«Комментарии в CSS» в главе 2);
HTML-теги в документе введены пра-
вильно. Тег абзаца всегда закрывается
при помощи </р>, только таким обра-
зом можно добиться корректной рабо-
ты CSS (см. раздел «Типы HTML-те-
гов» в главе 1);
если ваши правила идут вначале, пра-
вильно ли вы использовали тег <style>?
Типы в теге <style> обозначают, что
ни одно из определений не было ис-
пользовано. Кроме того, если вы указа-
ли тип носителя, стили будут влиять
только на информацию, поступаю-
щую на данный носитель. Поэтому
настройка типа носителя на print при-
ведет к тому, что данные стили не бу-
дут влиять на содержимое на экране
(см. раздел «Добавление стилей на
Web-страницу» в главе 2);
Обнаружение ошибок CSS |455|
при ссылке на таблицу стилей или ее
импорте указан верный файл. Про-
верьте заданный вами путь к файлу.
Помните, что нельзя включать тег
<style> во внешний CSS-файл (см. раз-
дел «Добавление стилей на Web-сайт»
в главе 2);
правильно ли настроены HTML-теги в
документе? Помните, что вам необхо-
димо использовать закрывающий тег
</р>, чтобы тег абзаца правильно рабо-
тал с CSS (см. раздел «Типы HTML-те-
гов» в главе 1);
Крайние меры
Если вы до сих пор не можете заставить
программу работать, сделайте следующее:
удалите правила и определите их сно-
ва. Когда вы не можете понять, в чем
кроется ошибка, попробуйте набрать
часть кода заново, чаще всего это по-
могает;
проверьте код в другом браузере и/или
операционной системе. Возможно, что
в данной операционной системе или
браузере некоторое свойство не вос-
принимается, что н приводит к нерабо-
тоспособности кода. Может быть, бра-
узер не позволяет использовать опре-
деленное свойство в том или ином
теге;
отдохните. Шучу, конечно, но взять
небольшой пятнадцатиминутный пе-
рерыв перед очередным штурмом
ошибки иногда просто необходимо;
если ничего не помогает, попробуйте
сделать еще что-нибудь.
14561 Отладка кода
Проверка CSS-правила
Хотя и Dreamweaver, и GoLive проверяют
CSS-код, W3C создал сайт, который назы-
вается CSS Validator. Он позволяет прове-
рять CSS-код на наличие ошибок и соот-
ветствие стандартам W3C.
Использование CSS Validator
от W3C
1. Зайдите на сайт
iigsaw.w3.org/css-validator/.
2. Определите метод, при помощи ко-
торого вы будете проверять CSS-код
(рис. 21.2). Разрешается указать URL
(при помощи URI), поместить CSS-код
непосредственно в форму (в тексто-
вую область) или загрузить ваши фай-
лы (при помощи ссылки upload).
В данном примере используется URL.
3. Введите URL Web-сайта или таблицы
стилей (рис. 21.3). Я рекомендую ука-
зывать URL таблицы стилей.
W3C CSS Validation Service
Welcome to the W3C CSS Valktatlon Service!
! Documents
I • Documentation
; • Acknowledgments
I Download the validator
W3C CSS Validation Service
VaMate your cascaiSng style sheet by
' VaSdate your cascecbng style sheet with a text area
i Vabdateyour cascading style sheet source flle by upload *
i hnp /?jlgsaw.w3.o<g/css-^ld<w?wll<ator-uri hrmt
JB_Q_e______
i u <i> пФ ®
ж
Рис. 21.2. Домашняя страница сайта CSS Validator
W3C CSS Validation Servica
W3C CSS Validation Service
i Welcome to the W3C CSS Validation Service!
Validate documents by URI
Enter the URI of a document (HTML with CSS or CSS only) you would
like validated:
Warnings
i? ^Medium ;
' parse tree. This means you should use valid HTML.
Рис. 21.3. Мы желаем, чтобы Validator проверил
сайт webbedENVIRONMENTS, поэтому мы ввели
URL для внешнего CSS-файла сайта
Проверка CSS-правила 14571
9 09 *зс CSS Validator rtsulUfor http.</www.wtbbedtnviro€->
(Д> -Л <•: Л
ж
Bows'.S By I
W3C CSS Validator Results for Ы;'!Я5?.!!!
Эе MME?
http: / /www.webbedenvironments.com
No error or warning found
Congratulation*!
The document validates as CSS!
To show your readers that you've taken the
care to create an interoperable Web page, you may display
this icon on any page that validates, Here is the HTML you
could use to add this icon to your Web page:
<a href-"httpi//5igs«w.w3.org/css-vslidstor. s
<img асу1e-^border:0;width , 8Bpx;height > 3 Ip:
«rc-‘httpt//jigsaw.w3.org/css-vslidat<
</p> I i
It you like, you can download a copy a! this image to keep in
your local web directory, and change the HTML fragment Л;
4. Задайте способ отображения преду-
преждений, а также метод проверки
(обычно CSS2), затем нажмите кнопку
Submit This URI for Validation (Под-
твердить проверку по этому URI). Про-
верка займет несколько секунд. Вы по-
лучите полный отчет об ошибках и
других возможных проблемах в CSS-
коде (рис. 21.4).
® Любой Web-дизайнер способен показать,
что лежит в основе его сайта, поэтому вы
вправе использовать значок CSS (рис. 21.5).
Однако только те страницы, которые про-
шли подтверждение при помощи CSS Vali-
dator, могут содержать значок Valid CSS
(рис. 21.6).
। _ | Допустимо не проверять CSS браузера,
Q отображающего ваш код, но такая провер-
1--1 ка иногда позволяет найти ошибки в коде.
Рис. 21.4. Сообщение об ошибках в CSS
Рис. 21.5. Скажите громко и с гордостью:
«Сделано с использованием CSS!»
Рис. 21.6. Если CSS-лравила прошли
проверку, вы также можете поместить
на странице значок Valid CSS
I6 Тиге Дж К
14581 Отладка кода
Определение ошибок
в коде JavaScript
Хотя JavaScript - не настоящий язык про-
граммирования, как, например, Java, он
также требует умения логически мыслить
и правильно строить последовательность
событий. Вот тут-то н могут возникнуть
ошибки.
Вам не нужно просматривать код JavaScript
и искать в нем ошибки, в отличие от рабо-
ты с CSS-правилом. Большинство браузе-
ров выдают сообщения, в которых указы-
ваются ошибки, допущенные вами при на-
писании кода JavaScript.
Поиск ошибок в коде JavaScript
в Netscape 4 напишите javascript: в
адресной строке браузера (рис. 21.7).
На экране появится окно, в котором
отображаются сообщения о любых
ошибках в коде JavaScript (рис. 21.8);
в Netscape 6 выберите пункт Tasks Ф
Tools Ф JavaScript Console (Задания Ф
Инструменты Ф Консоль JavaScript).
Откроется окно, где выводятся сооб-
щения о любых ошибках в коде
JavaScript;
в Internet Explorer сообщения об ошиб-
ках в коде JavaScript отображаются по
мере их появления, если, конечно, вы
не отключили соответствующую оп-
цию (рис. 21.9).
После того как ошибка найдена, вы може-
те исправить ее и проверить код заново
(рис. 21.10).
© - W ’ d .1* I IWMCr.pt
Рис. 21.7. Наберите javascript: в адресной
строке
JavaScript Console
I Warnings xj^Messagts Clear
Evaluate
Рис. 21.8. Сообщение об ошибке в Firebird
(браузере Mozilla)
Internet Explorer Script Error ........................
A script error occurred. Some scripts on the affected page
may not work correctly.
Mcreso't ;Sc* or nrnt.rc
Do you want to continue running scripts on the affected
page?
О Don't show errors ( Source ) ( No }
Рис. 21.9. Сообщение об ошибке в Internet Explorer
Определение ошибок в коде JavaScript [45б]
<html>
<head>
<script language="javascript" text="text/javascript">
Пропущено ()
Если var1=5,
появляется
сообщение
Пропущено}
myname и myName -
не одно и то же
function myFunction(var1 ,var2,var3) {
_______var myName = 'jason;
if var1 == 5 {
---------alert ('Got Here!')
var1++; [
_________document.nextFrame.valuel = var1;
else{
--------if (myname == 'jocelyn') comment = ’tara';
alert ('myName = ' + myName);
Пропущено'
Valuel может
и не существовать
}
</script>
</head>
<body> i----------------
<a href="javascript:myFunction(1,2)">Click Me</a>
</body>
Отображается
текущее значение
переменной
Пропущен
третий параметр
Рис. 21.10. Наиболее часто встречающиеся ошибки в JavaScript
i6-
1460 Отладка кода
Проверка кода
Ниже перечислены наиболее часто встре-
чающиеся ошибки:
пропуск фигурной скобки ({}) при на-
писании блоков команд. Если ие хвата-
ет одной из скобок, появится сообще-
ние об ошибке;
пропуск кавычек (' 'В данном случае
также будет выводиться сообщение об
ошибке;
ссылки на переменные и объекты, не
описанные и не инициализированные
в коде. Эта ошибка называется пробле-
мой синхронизации. Если в одном фрей-
ме есть ссылка на несуществующий
объект или объект, который еще не заг-
рузился, то при обработке кода возник-
нет ошибка. Единственным способом
найти ее является проверка существова-
ния переменной или объекта, на кото-
рый указывает ссылка. Это можно сде-
лать, поместив в код следующую строку:
if (document.nextFrame. valuel)
->{document.nextFrame.value1=x}
использование зарезервированных слов
как имен переменных. Некоторые слова,
например new, имеют в JavaScript спе-
циальное значение и их нельзя приме-
нять для обозначения переменной. Такое
слово используется только в сочетании с
другими словами, например newObject.
Список всех зарезервированных слов
приведен в приложении В;
одинаковые имена переменных. Опе-
чатка в названии переменной может
привести к непредсказуемым резуль-
татам. JavaScript также различает и ре-
гистр букв, поэтому случайное изме-
нение регистра хотя бы одной буквы
провоцирует возникновение ошибок;
неправильный порядок и неполный со-
став передаваемых при вызове функции
параметров. Программа на JavaScript
в этом случае либо не выполняется, либо
ведет себя непредсказуемо. Вы не пове-
рите, но я потратил на отладку кода мно-
го часов, пока не обнаружил, что при
вызове функции указал неправильный
порядок переменных;
пропуск круглых скобок, в которые за-
ключаются аргументы при использова-
нии оператора if. Лично я всегда забы-
ваю о скобках. Запомните, что структу-
ра оператора условия выглядит следую-
щим образом: if (argument) doThis;
загрузка другого кода. Иногда програм-
ма по каким-то причинам не запускает-
ся. Наилучший способ определения та-
кого типа ошибки - размещение марке-
ров alert в ключевых местах кода. Они
покажут, какая часть кода запускается,
а какая - нет. Поместите следующую
строку в ту часть кода, которая, как
предполагается, работает неправильно:
alert('Got Here');. Если эта часть кода
запускается, должно появиться указан-
ное сообщение;
Определение ошибок в коде JavaScript 14611
некорректные значения переменных.
Иногда переменным присваиваются
иные значения, чем те, которые вы ожи-
даете. Разместите маркер alert сразу же
после той части кода, где переменной
присваивается какое-либо другое значе-
ние: alert(’myVariable^+myVariable);
нарушение логической связи. Ну, здесь
все ясно. Удостоверьтесь, что все напи-
санное вами имеет логический смысл.
Если в коде программы нарушена ло-
гическая связь, не ждите желаемого,
все будет не так (если вообще будет).
Пройдите через весь ваш код так, как
если бы вы были компьютером. Про-
контролируйте, что всем переменным
присваиваются корректные значения и
в указанное время вызываются нуж-
ные функции.
ЕПри написании кода на JavaScript и HTML
можно использовать как двойные кавычки
так и одинарные (’'), но я рекомен-
дую применять одинарные для JavaScript,
а двойные - для HTML. Такое разграниче-
ние поможет избежать многих проблем.
Лично я делаю гораздо меньше ошибок,
придерживаясь этого правила.
Г__ I В JavaScript существует общепринятая сис-
Ц тема обозначения переменных. Вы можете
1----1 взять несколько слов, обозначающих
объект, с которым связана переменная, и
записать их подряд. При этом первое слово
начинается с маленькой буквы, а следую-
щие - с большой. Так, например, new object
превращается в newObject и т.п.
14621 Отладка кода
Панель инструментов PNH Developer
Если вы разрабатываете Web-страницы для браузеров Mozilla (например, Firebird
или Netscape 6+), панель инструментов PNH Developer может быть незаменимым
добавляет на вашу панель инструментов Bookmarks список ниспадающих меню
(рис. 21.11), который включает:
W3C Docs: ссылки на все стандартные документы W3C (HTML, XHTML, CSS,
DOM и др.);
Page Tests: ссылки, по которым вы можете отправить текущую страницу для
одобрения CSS или HTML (путем прохождения через формы). Также это меню
имеет функцию проверки ссылок, которая тестирует ссылки на странице;
Layout Tools: команды, позволяющие вам изменять, включать и выключать
таблицы стилей, которые используются на текущей странице: отобразить гра-
ницы для элементов, заменить элементы и ячейки таблиц (удобно при провер-
ке дизайна), удалить рисунки и точно настроить размеры окна браузера для
проверки дизайна при разном разрешении;
Other Tools: команды, которые показывают информацию об элементе формы
или cookies, использующихся на текущей странице;
View Source: ссылка, которая отображает на новой вкладке HTML-код для те-
кущей Web-страницы.
Рис. 21.11. Панель инструментов PNH в действии. На отображенной странице
были выделены границы блоков, а также отображены теги, которые
использовались для создания элемента. Также страница проходит через
процедуру одобрения CSS
Различия между браузерами [463]
Welcome to my
Web Site
« » Ж**'-*»*’_
W^wtom-V
Рис. 21.12. В Internet Explorer 5 для Windows
заголовок выглядит нормально, поскольку
параметр высоты строки определен как normal.
Однако в версии для Мас строки заголовка
частично перекрывают друг друга
Различия между
браузерами
HTML, CSS, JavaScript и объектная модель
документа (DOM) - все это интерпрети-
рованные языки. Каждый браузер может
с легкостью распознать их, устанавливая
соответствующие правила, которые по-
могают правильно отображать на экране
действия, определяемые кодом. К сожале-
нию, эти правила в той или иной степени
варьируются при переходе от браузера к
браузеру.
Мой друг экспериментировал с CSS на
своем Web-сайте. Параметр line-height
(отвечающий за высоту строки) он задал
как normal во всех правилах (см. главу 4).
Эта установка выглядела хорошо при ра-
боте в Internet Explorer 5 для Windows, а в
версии для Мас строки заголовка почему-
то налезали одна на другую. Очевидно,
что при создании Internet Explorer для
Windows программисты Microsoft реши-
ли, что при указании normal браузер дол-
жен использовать установленный размер
шрифта для каждой конкретной точки
страницы. А разработчики Мас-версии
при определении параметра normal указа-
ли, что высота строки будет соответство-
вать какому-то значению размера шрифта
по умолчанию. Таким образом, в Windows
параметр line-height будет иметь то же
значение, что и высота текста, например 36
пикселей, а в Мас - установленное по
умолчанию, то есть 12 пикселей; в резуль-
тате строчки частично перекрывают друг
друга (рис. 21.12).
14641 Отладка кода
Я часто сталкиваюсь с такими проблема-
ми. Многие из них на самом деле не явля-
ются ошибками в программном обеспече-
нии: дело в небольших отличиях в интер-
претации кода HTML, CSS или JavaScript
различными браузерами. Это похоже на
омонимы в обычном языке, то есть слова,
одинаковые по звучанию и написанию,
но различные по смыслу. Подобные раз-
ночтения не приводят к катастрофичес-
ким последствиям, но нервы потреплют
изрядно. Устранить различия в интерпре-
тации строк кода невозможно, только если
вы сами создадите какой-нибудь браузер,
который все люди мира установят на свои
компьютеры.
Попробуйте поставить заплатки на «вза-
имные недопонимания» браузеров:
скорректируйте код. Мой друг посту-
пил следующим образом: он выкинул
строку line-height: normal из кода, и
программа стала работать просто заме-
чательно;
подгоните код под операционную сис-
тему и/или браузер;
создайте страницу каким-нибудь дру-
гим способом. Например, в Netscape 6
возникают проблемы с отображением
фона и границ во вложенных CSS-сло-
ях. Если необходимы именно вложен-
ные слои, придется отказаться от опре-
деленного вами цвета границ;
оставьте как есть. Для решения некото-
рых проблем не стоит прилагать и ма-
лейшего усилия. Если проблема незна-
чительная, например в одном браузере
после тега <h1> ставится еще несколько
разделителей страницы, а в другом -
нет, то не стоит тратить драгоценное
время на исправление этого недостат-
ка, займитесь лучше чем-нибудь более
интересным.
Брюки или нижнее белье?
Когда я был студентом и жил в Лондо-
не, я часто посещал одни из местных
пабов (один из шести по пути к квар-
тире) на берегу Темзы.
Однажды я разговаривал со своим
другом, а рядом стоял пьяный регбист
и постоянно что-то проливал на меня.
После того как это произошло не-
сколько раз, я встал и начал кричать на
него: «Эй, ты что? Хочешь постирать
мои брюки?» К сожалению, я забыл,
что в Британии, в отличие от Америки,
слово «pants» (брюки), которое я сказал,
означает нижнее белье. Регбист и его
шестеро друзей позже попытались ис-
купать меня в Темзе. Не делайте таких
ошибок. Язык может убить!
ПРИНОШЕНИЯ
ПРИЛOUIA4IMI fl ♦
Краткая справка о CSS...........................466
пшошалш fi ♦
Краткая справка о DHTML..........................476
ПРИЛОНШ1ИА с ♦
Браузеры, поддерживающие DHTML и CSS.............483
ПШ0ША41Ш Р ♦
Шрифты, поддерживаемые браузером.................492
ПРИЛОША41ИА fl ♦
Символы клавиатуры...............................497
ПШ0ША41ИА f ♦
Инструменты и ресурсы............................500
(ПРДШ о GJ
А
В главах 2-8 говорится о свойствах, кото-
рые можно использовать с CSS. В данном
приложении они представлены более чет-
ко. Кроме того, эти таблицы включают
информацию о том, возможно ли приме-
нять каждый параметр к различным ти-
пам HTML-тегов. Все параметры описаны
следующим образом: с чем их можно ис-
пользовать, наследуется ли свойство под-
чиненными элементами, а также поддер-
живается ли свойство различными брау-
зерами и операционными системами.
В приложении А приведены следующие
таблицы:
табл. АЛ. Основы CSS (глава 2);
табл. А.2. Псевдоклассы и псевдоэлемен-
ты (глава 2);
табл. А.З. Управление шрифтом (глава 3);
табл. А.4. Управление текстом (глава 4);
табл. А.5. Управление элементом (гла-
ва 5);
табл. А.6. Регулирование размещения
(глава 6);
табл. А.7. Управление видимостью эле-
мента (глава 7);
табл. А.8. Управление списком и кур-
сором (глава 8).
Легенда
для Macintosh и Windows;
О ни для одной, ни для дру-
гой системы;
W только для Windows;
М только для Macintosh;
Р некоторые проблемы;
Все свойство можно приме-
нять ко всем тегам HTML;
Разметка свойство может быть ис-
пользовано только для те-
гов, относящихся к раз-
метке страницы;
Линейный свойство можно приме-
нить только к inline-тегам;
Выделение полужирным шрифтом
показывает значение свойства по
умолчанию.
Браузеры
N Netscape;
IE Internet Explorer;
S Safari;
О Opera.
Помните, что Netscape 6 (и более но-
вые версии) основаны на движке
Gecko. Поэтому, например, Mozilla 1
будет обладать такой же совместимо-
стью, как и Netscape 6. Mozilla 1.3 и 1.5
(Firebird и Camino) будут иметь при-
мерно такую же совместимость, как и
Netscape 7.
Краткая справка о CSS 14671
Далее помещена информация о том, как
определенное свойство можно применить
к различным тегам HTML. Каждое свой-
ство описывается таким образом: с каким
тегом его используют, связано ли оно с
дочерними элементами, какими браузера-
ми и операционными системами оно под-
держивается.
Свойства, которые помечены значком Р
в столбце, относящемся к браузеру, час-
тично реализованы в одной или обеих
операционных системах. Я бы не реко-
мендовал их использовать.
Не забывайте, что у каждого браузера есть
несколько версий, причем порядковый
номер у них может совпадать. Например,
не существует Netscape 4, а есть несколь-
ко версий (4.06,4.5 и 4.7), не сильно отли-
чающихся друг от друга. В этом приложе-
нии представлена только проверенная ин-
формация, но если вы все-таки захотите
протестировать CSS-возможности своего
браузера, попробуйте применить специ-
ально предназначенный для этого инст-
румент от W3C, который вы найдете на
сайте www.w3.org/Style/CSS/Test.
1468] Приложение A
Таблица А.1. Основы CSS
Имя N4 N6 N7 IE4 IE5 1Ё6 S1 07
<style>
<link>
©import О
©media О О *
Inheritance
Contextual
Comments
!important Р
Media: Print О О
* IE5.5 для Windows
Таблица A.2. Псевдоклассы и псевдоэлементы
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
: link - Якорь Да
:active - Якорь Да О
:visited - Якорь Да О
:hove г - Все Да о
:first-line - Разметка Нет о О *
:first-letter - Разметка Нет о О *
* Только IE5.5 для Windows
Краткая справка о CSS 14691
Таблица А.З. Управление шрифтом
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
font-family <family-namei> Все Да
serif
sans-serif
cursive М
fantasy М
monospace
font-style normal Все Да
italic
oblique О
font-variant normal Все Да о
small-caps о Р
font-weight normal Все Да
bold
bolder W
lighter о
100-900’
font-size <length> Все Да
<percentage>
smaller Р
larger Р
XX-small Р
X-small Р
small Р
medium Р
large Р
X-large Р
XX-large Р
font <font-style> Все Да
<font-variant> о Р
<font-weight>
<font-size>/<lineheight> Р
<font-family>
’ Требует наличия на компьютере пользователя специальных шрифтов
14701 Приложение A
Таблица А.4. Управление текстом
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
color normal Все Да
word-spacing normal Все Да О М м
<length> О м м
letter-spacing normal Все Да о
<length> о
vertical-align baseline Линейный Нет о
<percentage> о о м* Р
sub о
super о
top о о М“
text-top о о М“
middle о о М‘*
bottom о о м**
text-bottom о о М“
line-height normal Все Да
<number>
<length> Р
<percentage> р
text-decoration none Все Нет
underline
overline о
line-though
blink о о О О
text-transform none Все Да
capitalize
uppercase
lowrcase
text-aling left Разметка Да
right
center
justify р W
text-indent <length> Разметка Да
<percentage>
direction rtl Все Да о о
Itr о о
unicode-bidi bidi-override Все Да о о
embed о о
normal о о
page-break- always Все Да о о
Defore,page- break-after auto
white-space normal Разметка Да о **
pre о *
nowrap о о " Р
* Только для MacOS, в Windows недоступно
’* IE5.5 Для Windows
Краткая справка о CSS |4711
Таблица А.5. Управление элементом
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
margin-top. -right,
-bottom, -left <length> Все Нет Р Р
<percentage> Р Р
auto Р Р
margin <length> Все Нет 0
<percentage> О
auto О 0 *
padding-top. -right, -bottom -left <length> Все Нет Р р
<percentage> Р р
padding <length> Все Нет Р р
<percentage> Р р
border-coloi <color> Все Нет Р
transparent Р
inherit Р
border-style none Все Нет Р
dotted О м
dashed о м *
solid
double
groove
ridge
inset
outset
border-top. -right, -bottom, -left-width medium Все Нет р
<length> р
thin р
thick р
border-width medium Все Нет р
<length> р
thin р
thick р
border-top, -right, -bottom, -left <border-width> Все Нет о р
<border-style> о р
<color> о р
14721 Приложение A
Таблица A.5 (продолжение)
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
border <border-width> Все Нет Р Р
<border-style> Р Р
<color> Р
-moz-border-radius, -bottomleft -bottcmright, -topleft, -topnght <lenght> Block Нет О О О о о о
<percentage> О О о о о о
width auto Block Нет Р Р
<length> Р Р
<percentage> Р Р
height auto Block Нет О Р
<length> о Р
max-widtn, min-widtn, max-neignt. max-width <length> Bee Нет о О о о
<percentage> о о о о
auto о о о о
float none Bee Нет
left р р
right р р
clear none Bee Нет
left р м
right р м
both
display Block Bee Нет р
inline о W
list-item р м м
table о о м о
table-cell о о м о
table-footer- group О О м о
table-row о о м о
table-row-group о о м о
none
background-color <color> Bee Нет
transparent
background-image none Bee Нет
url (<url>)
Краткая справка о CSS 14731
Таблица А.5 (окончание)
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
background-repeat repeat Все Нет
repeat-x Р
repeat-y Р
no-repeat
background- attachment scroll Все Нет О
fixed О
background- position <percentage> Block Нет о р Р Р
<length> о
top о р Р
center (vertical) о р Р
bottom о р Р
left о р Р
center (horizontal) о р Р
right о р Р
background <backgrouna -C010r> Все Нет
<background- image>
<background- repeat>
<background- attachment> о
<background- position> о
’ IE5.5 для Windows
14741 Приложение A
Таблица A.6. Регулирование размещения
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
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
* Только в MacOS, в Windows недоступно
’* Атрибут position должен иметь значение absolute или relative
Таблица А.7. Управление видимостью элемента
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
clip auto Все* Нет О
<shape> О
overflow visible Все* Нет о
hidden о
scroll о
auto о
visibility inherit Все Да”
visible
hidden
hide О О о 0 О о О
show О О о 0 О о о
-moz-opacity <0 on1.0> О о 0 О о о
’ Параметр position для элемента также должен быть задан как absolute или relative
** Если параметр visibility задан как inherit
Краткая справка о CSS 14751
Таблица А.8. Управление списком и курсором
Имя Значение Приме- няется к Наследу- ется N4 N6 N7 IE4 IE5 IE6 S1 07
list-style-tipe disk Все* Да
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
list-style-image none Все* Да О
url(<url>) О
list-style- outside Все’ Да О
position inside о
list-style <list-style- type> Все* Да
<list-style- о
position> <list-style- image> о
border-collapse collapse о о О М’*
separate о о о м**
top о о м м
caption-side left о о о о о О о о
bottom о о м м
right о о о о о О о о
cursor auto Все Да о м**
crosshair о м**
hand** о о о М*‘ о о
pointer о М*‘
move о м**
n-resize о м**
ne-resize о м**
e-resize о м**
se-resize о м**
s-resize о М*‘
sw-resize о м**
w-resize о м**
nw-resize о м**
text о м**
wait о м**
help о м**
* В Netscape и IE относится лишь к тегу clistx По стандарту CSS может применяться только ктегу,
имеющему в своем описании атрибут display со значением _list_item (display: _list_item)
’* Только в IE. Аналогично значению pointer
ШМ (ПРАШ
О NITfflL
В
В главах 10-13 подробно рассказано о том,
как найти информацию о разных объектах
в вашем Web-окружении. Таблицы в дан-
ном приложении представляют эту инфор-
мацию в форме, удобной для чтения. Если
существует несколько вариантов найти оп-
ределенный параметр, рекомендуемый спо-
соб выделен полужирным шрифтом.
Кроме того, это приложение включает
список зарезервированных слов и других
слов, которых вы должны избегать при
вводе ID, классов и переменных JavaScript:
табл. В.1. Основные обработчики со-
бытий (глава 10);
табл. В.2. Поиск объектов (глава 10);
табл. В.З. Свойства системы (глава 11);
табл. В.4. Свойства браузера (глава 11);
табл. В.5. Параметры страницы (гла-
ва 11);
табл. В.6. Свойства объектов (глава 12);
табл. В.7. Свойства события (глава 13).
Краткая справка о DHTML 14771
Таблица В.1. Основные обработчики событий
Имя Когда происходит событие Применимо к
onLoad После начала загрузки объекта Документы и изображения
onUnload После окончания загрузки объекта Документы и изображения
onFocus Когда элемент выделен Документы и формы
onBlur Когда выделение с объекта снято Документы и формы
onMouseOver Когда указатель мыши находится над областью Все*
onMouseOut Указатель мыши больше не находится над областью Все’
onClick При щелчке мышью по области Все*
onMouseDown Пока кнопка мыши нажата Все’
onMouseUp Когда кнопка мыши отпущена Все*
onMouseMove Во время движения курсора Документ
onKeyDown Пока клавиша на клавиатуре нажата Документы и формы
onKeyUp Когда клавиша на клавиатуре отпущена Документы и формы
onKeyPress Когда клавиша нажата и сразу отпущена Документы и формы
onResize*’ При изменении размера окна браузера или кадра Документ
OnMove”* Во время перемещения окна браузера Документ
* Доступно только для ссылок и изображений в Netscape 4
* * Не поддерживается в IE4
* ” Не поддерживается в IE4/5 и Netscape 6
Таблица В.2. Поиск объектов
Параметры поиска Метод Совместимость
Объект document,getElementByID(objectID) document.layers[objectIO] document.layers(objectIO] IE4, N6, S1, 05 IE4, 05 N4 (только)
Таблица В.З. Свойства системы
Параметры поиска Имя Значение Совместимость
Операционная система navigator.appVersion <string> IE3, N2
Ширина экрана (всего) screen.width <pixels> IE4, N4
Высота экрана (всего) screen.height <pixels> IE4, N4
Ширина экрана (текущая) screen.availWidth <pixels> )E4, N4
Высота экрана (текущая) screen.availHeignt <pixels> IE4, N4
Количество цветов screen.colorDepth <number> IE4, N4
14781 Приложение В
Таблица В.4. Свойства браузера
Параметры поиска Имя Значение Совместимость
Имя браузера navigator.appName <string> IE3, N2
Версия браузера parselnt(navigator.appVersion) <number> IE3, N2
Ширина окна браузера window.outerWidtn <pixels> N4
Высота окна браузера window.outerHeight <pixels> N4
Таблица В.5. Параметры страницы
Параметры поиска Имя Значение Совместимость
Ссылка self.location <stnng> IE3, N2
Заголовок document.title <String> IE3, N2*
Ширина видимой части window. innerWidth <pixels> N4
document.body.clientwidth <pixels> IE4
Высота видимой части window.innerHeight <pixels> N4
document body.clientHeight <pixels> IE4
Положение документа window.pageXDffset <pixels> N4
при прокрутке влево document.body.scrollLeft <pixels> IE4
Положение документа window.pagtYOffset <pixels> N4
при прокрутке вверх document.body.scrollTop <pixels> IE4
* Ошибка в Netscape 4 для MacOS: вместо заголовка возвращает имя файла
Краткая справка о DHTML |479|
Таблица В.6. Свойства объектов
Параметры поиска Имя Значение Совместимость
ID объекта evt.target, id <String> N6, S1, 05
evt.scrElement. id <string> IE4, 05
Ширина offsetwidth <length> IE4, N6, SI, 05
style.width* <length> IE4, N6, S1, 05
Высота offsetHeight <length> IE4, N6, S1, 05
style.heigth* <length> IE4, N6, S1, 05
Положение слева 1 offsetLeft <length> N6, S1, 05
pixelLeft <length> IE4, N6, SI, 05
style left* <length> IE4, N6, S1,05
Положение сверху offsetTop <length> N6, S1, 05
pixelTop <length> IE4, N6, S1, 05
style.top* <length> 1E4, N6, S1, 05
Z-индекс style zindex* <number> IE4, N6, S1, 05
Видимость style.visibility* visible
IE4, N4, SI. 05
hidden IE4, N6, SI, 05
show N4 (только)
hide N4 (только)
Область обрезки style.clip[]** <array> IE4, N6, S1, 05
style.clipBottom <length> IE4 (Win)
style.clipLeft <length> IE4 (Win)
style.clipRight <length> IE4 (Win)
style.clipTop <length> IE4 (Win)
' Требует, чтобы значение было указано с помощью JavaScript до того, как оно будет прочитано
*’ Самый надежный способ найти область обрезки заключается в том, чтобы запросить диапа-
зон, как описано в разделе «Определение видимой области объекта» в главе 12
14801 Приложение В
Таблица В.7. Свойства события
Параметры поиска Имя Значение Совместимость
Тип события evt.type <String> IE4, N4, S1, 05
Нажатая клавиша evt.charCode <nu<nber> N4
evt.keyCode <number> IE4, N6
Клавиша Shift evt.shiftKey <boolean> IE4, N6, 05, St
Клавиша Ctrl evt.ctrKey <boolean> IE4, N6, 05, S1
Клавиша Alt/Option evt.altKey <boolean> IE4, N6, 05, S1
Клавиша Command evt.metaKey <boolean> N6
Нажатая кнопка мыши evt.button <stnng> IE4, N6, S1, 05
Положение курсора мыши слева (на экране) evt.screenX <length> IE4, N6, S1, 05
Положение курсора мыши сверху (на экране) evt.screenY <length> IE4, N4, S1, 05
Положение курсора мыши слева (в окне) evt.screenX <length> IE4, N6, S1, 05
Положение курсора мыши сверху (в окне) evt.screenY <length> IE4, N6, S1, 05
Краткая справка о DHTML 14811
Служебные слова
При создании класса CSS, ID CSS или имен
переменных JavaScript не забывайте, что у
браузера есть слова, зарезервированные
для определенных целей. Я не рекомендую
их использовать.
Допустимо применять служебные слова
в сочетаниях слов. Например, new и label -
не совсем удачные имена для переменных,
a newLabel - отличный вариант.
Служебные слова
JavaScript и Java
Ниже приводятся служебные слова языка
JavaScript или Java, в любом случае лучше
их не употреблять.
abstract finally short
boolean float static
break for super
byte function switch
case goto synchronized
catch if this
char implements throw
class import throws
comment in transient
const instanceOf true
continue int try
debugger interface typeof
default label var
delete long void
do native while
double new with
else null
enum package
export private
extends protected
false public
final return
14821 Приложение В
Другие слова, которых следует
избегать
Хотя официально эти слова не входят
в список служебных слов, они применя-
ются в JavaScript. Их использование мо-
жет приводить к ошибкам.
Не забывайте, что Netscape чувствителен
к регистру, поэтому слово, начинающее-
ся с заглавной буквы, и слово, написанное
прописными буквами, означают совсем не
одно ито же. Например, history и History
имеют разные значения.
alert event lenght outerHeight Select
Anchor evt Link outerWidth self
Area Fi lellpLoad location Packages setinterval
arguments find Location pageXoffset setTimeout
Array focus locationbar pageYoffset status
assign Form Math parent statusbar
blur Frame menubar parseFloat stop
Boolean frames MimeType parselnt String
Button Function moveBy Password Sub,it
callee getClass moveTo personalbar sun
caller Hidden name Plugin taint
capture Events hide NaN print Text
Checkbox history navigate prompt Textarea
clearinterval History navigator prototype toolbar
clearTimeout home Navigator Radio top
close Image netscape ref toString
closed Infinity Number RegExp unescape
confirm innerHeight Object releaseEvents untaint
constructor innerWidth onBlur Reset unwatch
Date isFinite onError resizeBy valueDf
defaultstatus isNaN onFocus resizeTo watch
document java onLoad routeEvent window
Document JavaArray onUnload scroll Windows
Element JavaClass open scrollBars
escape JavaObject opener scrollBy
eval JavaPackage Option scrollTo
шут,
поддошмщис
Mimi и (й
с
Прошли времена конфликтов между брау-
зерами. Это значит, что почти каждый
пользователь сети Internet работает в брау-
зере Microsoft Internet Explorer 5.5 или 6.
Так что, мы можем программировать
только для Internet Explorer, верно? Нет.
Существует довольно много браузеров,
которые поставляются не Microsoft. Радо-
стная новость для вас: благодаря совмес-
тимости браузеров и преобладанию одно-
го браузера Web-программирование ста-
новится все более и более простым. Важ-
но понимать, что ваши посетители могут
не только использовать разные браузеры
для просмотра вашего Web-сайта, но и
работать с различными стандартами.
В этом приложении мы кратко расскажем
об основных Web-стандартах и их взаимо-
действии с распространенными браузерами.
Стандарты браузеров
Если браузер совместим с DHTML и CSS, он
должен поддерживать и следующие тех-
нологии:
HTML
На HTML основан DHTML. Предпочти-
тельна поддержка последней версии
HTML 4 (версии 4.01);
JavaScript
JavaScript встречается в разных вариантах:
JavaScript 1.5: продукт Netscape/Mozilla,
изначально созданный Netscape. Пер-
вые DHTML-браузеры использовали
версию 1.2, а современные DHTML-
браузеры работают с версией 1.5;
Jscript 5: версия Microsoft. Эта версия
очень похожа на JavaScript, но немного
отличается по синтаксису при решении
определенных задач. DHTML-браузеры
сначала использовали JScript 3, но сей-
час используют JScript 5;
ECMAScript 262: ECMAScript - это офи-
циальная стандартная версия JavaScript,
которую используют Safari и Opera.
Несмотря на то, что эти версии, в общем,
одинаковые, между ними существуют важ-
ные отличия, которые указаны в тексте
книги и приложении В.
14841 Приложение С
CSS
CSS первого уровня: CSS поддерживает
необходимые функции контроля фор-
мата Web-страницы, а также дает воз-
можность определять элементы в каче-
стве объектов;
CSS-позиционирование или CSS вто-
рого уровня: для перемещения и изме-
нения объектов браузер должен поддер-
живать создание элементов управле-
ния, при этом следует применять либо
более ранний стандарт CSS-Р, который
затем вошел в CSS2, либо сам CSS2.
W3C выпустила новую, немного изменен-
ную версию стандарта 2 (2.1), в которой
был исправлен ряд ошибок и добавлены
популярные функции (сейчас их включи-
ли в спецификацию для версии 3). Так как
обновление браузеров может занять годы,
не стоит ждать, что данные изменения всту-
пят в действие очень скоро.
DONI
Современные браузеры используют мо-
дель W3C DOM, но более старые версии
Netscape и Internet Explorer работали со
своими моделями DOM:
W3C DOM 1 или 2 стандартизует объект-
ную модель для Web-страниц, позволяя
Web-дизайнерам (в большинстве слу-
чаев) выполнять только одну кодировку
для динамических скриптов. Различия в
типе JavaScript, применяемом браузером,
могут потребовать использования раз-
ного синтаксиса. W3C DOM сейчас име-
ет уровень 2, но большинство браузеров
по-прежнему имеет первый уровень.
Немногие браузеры готовятся к будуще-
му третьему уровню, который пока на-
ходится иа стадии разработки;
All DOM была введена в Internet Explo-
rer 4. Эта модель по-прежнему доступна
в Internet Explorer 5 и 6, но практически
не используется;
Layers DOM была доступна только в
Netscape 4. В более поздних версиях эту
модель заменила модель W3C DOM.
Браузеры, поддерживающие DHTML и CSS [485]
Таблица С.1. Спецификации Internet Explorer 4
Технология Версия
HTML HTML 4
JavaScript Jscript 3
CSS CSS1.CSS-P
DOM All DOM
Internet Explorer для Windows и Web
Standards Project
Существуют определенные сомнения
по поводу того, что Internet Explorer 6
является большим шагом на пути к
гармонизации стандартов, особенно
при сравнении его с версией 4. Даже
адаптация CSS и DOM для Internet
Explorer 6 еще далека от завершения.
Интегрировав браузер далее в опера-
ционную систему, Microsoft сумел еще
больше увеличить пропасть между
пользователями версии Internet Exp-
lorer для Windows и пользователями
других браузеров, даже Internet Explo-
rer 5 для Мас (о нем мы говорили ра-
нее в этом приложении). По сути дела,
Microsoft внедрила часть самых важ-
ных стандартов, например, W3C DOM
и HTML 4 и уже привлекла к работе
над этим большое количество раз-
работчиков, включая Web Standards
Project (www.webstandards.org/wfw/
ieah.html).
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-Р (частично), JavaScript
н объектную модель документа (DOM) In-
ternet Explorer (табл. С.1).
14861 Приложение С
Internet Explorer 5 и 6 (Windows)
Internet Explorer стратегически интегри-
рован в операционную систему Windows и
занимает лидирующее положение на рын-
ке Web-браузеров (табл. С.2). Считается,
что этому браузеру принадлежит 85%
рынка, и он широко принят в корпора-
тивном мире.
Internet Explorer 6 будет самым последним
обновлением браузера вплоть до 2006 г.,
когда планируется выход новой операци-
онной системы Microsoft Windows (под
кодовым названием «Longhorn»), поэтому
мы ограничим наш обзор этой версией.
Таблица С.2. Спецификации Internet Explorer 5 и 6
(Windows)
Технология Версия
HTML HTML 4 (частично), XHTML 1 (частично)
JavaScript Jscript 5
CSS CSS1 (частично), CSS2 (частично)
DOM W3C DOM 1 (частично), All DOM
Internet Explorer 5 (Macintosh)
Несмотря на то что Internet Explorer 5 для
Windows и для Macintosh были разработа-
ны Microsoft, у них не так много общего.
Обе версии - Web-браузеры, и обе называ-
ются Microsoft Internet Explorer 5. Но на
этом их сходство заканчивается. Internet
Explorer 5 для Macintosh отличается от вер-
сии для Windows так же кардинально, как
MacOS отличается от Windows.
Несмотря на то, что Internet Explorer был са-
мым популярным браузером на Мас в те-
чение нескольких лет, Microsoft только в
2003 г. приняла решение остановить разви-
тие браузера в пользу нового браузера
Safari, который создается Apple. Safari будет
браузером по умолчанию для всех новых
Мас; тем не менее, Internet Explorer еще
некоторое время будет сохранять пози-
ции на рынке Мас по мере того, как ста-
рые компьютеры будут уходить в прош-
лое (табл. С.З).
Таблица С.3. Спецификации Internet Explorer 5 (Mac)
Технология Версия
HTML HTML 4, XHTML 1
JavaScript Jscript 5
CSS CSS1, CSS2 (частично)
DOM W3C DOM 1, All DOM
Браузеры, поддерживающие DHTML и CSS 14871
Netscape и Mozilla
Компания Netscape за последние годы про-
шла через ряд серьезных изменений и пре-
вратилась из лидера в производстве Web-
браузеров в службу, а затем и в Internet-
провайдера. С появлением Netscape 6 сам
браузер Netscape стал программой, которая
разрабатывается не компанией Netscape,
а компанией Mozilla. Netscape и Mozilla
(channels.netscape.com/ns/browsers) исполь-
зуют одну и ту же технологию Gecko для
создания Web-страниц. Теоретически, это
обозначает, что все браузеры, работающие
с Gecko (Netscape 6+, Mozilla, Firebird и
Camino) должны отображать Web-страни-
цы примерно одинаково.
В этой книге мы говорили Netscape 6+ и
Mozilla, подразумевая примерно одно и то
же. Если определенный атрибут, значение
или метод работает в Netscape 6, вы може-
те быть уверенными, что он будет рабо-
тать и в любом браузере Mozilla.
Netscape 4
Более четырех лет Netscape 4 оставался
главным Web-продуктом компании Netsca-
pe и применялся многими Web-разработ-
чиками, хотя не полностью поддерживал
Web-стандарты. Большинство использу-
емых сегодня стандартов в то время либо
не существовали, либо только начинали
появляться.
Netscape 4 внес в создание сайтов свою
«изюминку» - DHTML, основанный на теге
<1ауег>. Этот метод так и не стал популяр-
ным, и впоследствии Netscape отдала пред-
почтение развитию стандартов, устанавли-
ваемых W3C.
Netscape 4 поддерживает HTML, CSS1 (ча-
стично), CSS-Р (частично), JavaScript и Net-
scape Layers DOM (табл. Са).
Netscape 4 почти полностью ушел из сре-
ды Internet, занимая менее 1% рынка.
Если только вы совершенно не уверены в
том, что большинство ваших посетителей
будет использовать этот браузер, мы боль-
ше не рекомендуем выполнять кодировку
для него.
Таблица С.4. Спецификации Netscape 4
Технология Версия
HTML JavaScript HTML 4 JavaScript 1.2 (4.0 - 4.05), JavaScript 1.3 (4.06+)
CSS CSS1 (частично), С85'Р(частично)
DOM Layers DOM
14881 Приложение С
Netscape 6 и 7
Netscape 6 (именно 6, а не 5) был создан
на базе движка Gecko, разработанного в
соответствии с последними стандартами
Web. Для Web-дизайнеров, мучительно
пытающихся создать сайты для несовме-
стимых Web-браузеров, это явилось на-
стоящей находкой.
Gecko - замечательный инструмент, ком-
пактный, удивительно быстрый и наибо-
лее соответствующий стандартам. Его со-
здатели должны гордиться своей работой.
Но интерфейс браузера переполнен раз-
личными меню, кнопками и опциями,
расположенными без четкой иерархии.
Многие меню в нижней части экрана не
более чем ссылки на Web-страницы Net-
scape. Я не смог найти способ изменить
эти ссылки для удовлетворения потреб-
ностей пользователей. Хотя возможность
создания собственного бокового меню -
шаг в правильном направлении, она, ка-
жется, существует исключительно для
того, чтобы пользователи заходили на
сайты Netscape и ее компаньонов, а не для
обеспечения удобного и настраиваемого
интерфейса.
Netscape 7 вносит ряд улучшений по ско-
рости и интерфейсу по сравнению с пре-
дыдущей версией, а также добавляет повы-
шенную совместимость с Internet Explorer.
Обе версии включают намного больше
функций, чем обычный Web-браузер. Сре-
ди новых функций - электронная почта,
адресная книга, HTML-редактор и поддер-
жка мгновенных сообщений (табл. С.5).
Таблица С.5. Спецификации Netscape 6 и 7
Технология Версия
HTML HTML 4, XHTML 1
JavaScript JavaScript 1.5, JScript 1.5 (частично)
CSS CSS1, CSS2
DOM W3C DOM 1
Браузеры, поддерживающие DHTML и CSS 14891
Mozilla, Firebird, Camino
Mozilla создала три новых браузера, которые
основаны на движке Gecko (www.mozilla.org):
Mozilla (Mac/Win): этот браузер похож
на Netscape, но интерфейсы несколько
отличаются. Mozilla включает те же
функции, что и Netscape: электронную
почту, чат, адресную книгу и инструмен-
ты HTML-редактирования (табл. С.6);
Firebird (Mac/Win): в отличие от Mozilla,
Firebird представляет собой всего лишь
браузер. Без всяких сложностей. Поэто-
му данный браузер очень быстр и прост
в использовании. Многие Web-дизай-
неры используют его как первичный;
Camino (Мас): как и Firebird, Camino
представляет собой обычный браузер,
но он был создан специально для опера-
ционной системы Mac OS X и использу-
ет все преимущества элементов GUI.
Таблица С.6. Спецификации Mozilla
Технология Версия
HTML HTML 4, XHTML 1
JavaScript JavaScript 1.5
CSS CSS1, CSS2
DOM W3C DOM 1
Safari (Mac)
Понимая, что нельзя вечно рассчитывать
на Microsoft, который поставляет браузер
для операционной системы Мас, компания
Apple разработала Web-браузер Safari -
www.apple.com/safari. Данный браузер был
основан на другом браузере, Konqueror, и
предназначался только для Mac OS X. Сейчас
браузер Safari быстро становится единст-
венным браузером для пользователей Мас.
Как и Konqueror, Safari совместим со мно-
гими стандартами. Он по-прежнему на-
ходится в разработке и может временами
давать сбои. Это значит, что скрипты, ко-
торые должны работать, могут не рабо-
тать совсем (табл. С.7).
Таблица С.7. Спецификации Safari
Технология Версия
HTML HTML 4, XHTML 1.0
JavaScript ECMA Script 262
CSS CSS1, CSS2 (частично)
DOM wsc oom 2,
W3C DOM 3 (частично)
|7 Тиге Дж. К
14881 Приложение С
Opera (Мас/Windows)
Компания Opera Software (www.opera.com)
поставила перед собой цель - создать брау-
зер, полностью соответствующий стандар-
там. В 5-й версии компания Opera наибо-
лее близко подошла в своей цели. Хотя и
этот браузер несовершенен, Opera считает,
что стандарты W3C являются не просто
пожеланиями, а руководством к действию.
К тому же браузер Opera достаточно
компактен (нужно загрузить всего лишь
2 Мб без Java), страницы загружаются
поразительно быстро, уровень безопас-
ности высок.
Хотя изначально Opera предназначался
только для Windows, компания добавила
поддержку некоторых других платформ
(включая EPOC, Linux и MacOS), он также
может работать на любой версии BeOS. На
сегодняшний день версия для Macintosh
все еще тестируется; кажется, некоторые
стандарты либо пропущены, либо не пол-
ностью реализованы (табл. С.8).
Opera начинала работу как браузер, со-
вместимый только с Windows. Затем в эту
программу добавили другие платформы,
включая EPOC, Linux и Мас. В настоящее
время для Мас используется версия 6, а
для Windows версия 7; при этом обе вер-
сии работают примерно одинаково.
Как и компьютерные браузеры, Opera
очень популярен на других платформах,
например, PDA и мобильных телефонах.
Таблица С.8. Спецификации Opera
Технология Версия
HTML HTML 4, XHTML
JavaScript ECMA Script 262
CSS CSS1, CSS2
DOM W3C DOM 2
Браузеры, поддерживающие DHTML и CSS 14911
Другие браузеры
Может быть, войны браузеров и закончи-
лись, но это не останавливает разработчи-
ков от выпуска новых и улучшенных брау-
зеров. Это становится ясно, если посмот-
реть на альтернативные браузеры, кото-
рые создаются открытыми обществами
разработчиков (а также для Мас).
OmniWeb (Мас)
www.omniqrouD.com/aDDlications/omniweb
OmniGroup известна в среде пользовате-
лей Мас благодаря своему программному
обеспечению для OS X. И разработанный
этой группой Web-браузер, один из пер-
вых для Mac OS X, не стал исключением.
Хотя ранние версии OmniWeb имели оп-
ределенные трудности с визуализацией
DHTML, этот браузер прошел долгий путь
и теперь обладает всеми преимуществами
встроенных Web-функций OS X, что су-
щественно повышает его совместимость с
различными стандартами (табл. С.9).
Таблица С.9. Спецификации OmniWeb и Kongueror
Konqueror (Open Source)
www.konaueror.org
Konqueror является не только открытым
для всех браузером, он также работает как
менеджер файлов и программа для про-
смотра. Большинство пользователей, веро-
ятно, не будет работать с данным браузе-
ром, так как Safari построен на Konqueror,
но его развитие заслуживает внимания.
iCab (Мас)
www.icab.de
iCab невелик, - он занимает всего 900 Кб.
Браузер работает быстро: кажется, что стра-
ницы появляются сразу, как только вы
щелкните по ссылке. Он придерживает-
ся стандартов и отвечает рекомендациям
W3C. Этот браузер делает все, что и должен
делать Web-браузер.
Технология Версия
HTML HTML 4, XHTML 1
JavaScript ЕСМА Script 262
CSS CSS1, CSS2 (частично)
DOM W3C DOM 2, W3C DOM 3 (частично)
ШРИФТУ,
£РЛУЗУ>ОМ
о
Вы можете использовать атрибуты шриф-
та, чтобы указать, какой шрифт должен ис-
пользоваться на вашей Web-странице:
font-family times, "times new roman",
->serif:
Конечно, шрифты, которые вы можете ис-
пользовать, напрямую зависят от шриф-
тов, доступных на компьютере посетителя.
Если у посетителя не установлен нужный
шрифт, то ои не увидит вашу страницу
так, как вам хотелось бы. Чтобы поддержи-
вать единство шрифтов, Web-дизайнеры
предпочитают использовать Times в каче-
стве шрифта с засечками, Arial/Helvetica в
качестве рубленого шрифта и Courier в ка-
честве моношрифта. На большинстве ком-
пьютеров установлены десятки шрифтов,
нужно только угадать, какие именно
шрифты, скорее всего, стоят на компью-
терах ваших посетителей.
В следующей таблице мы приводим спи-
сок шрифтов, которые установлены на
компьютерах Windows и Macintosh по
умолчанию, а также список шрифтов
Microsoft Core Web, устанавливаемых
Internet Explorer. Список также включает
стили (полужирный, полужирный курсив
и курсив) написания шрифтов, семью, к
которой принадлежит шрифт, и пример
написания шрифта.
Чтобы использовать эти шрифты, выбери-
те шрифт, который есть в списке для Мас и
Windows, либо выберите похожие шрифты
и укажите их в списке шрифтов. Помните,
что имена шрифтов, которые состоят из
нескольких слов, следует приводить в ка-
вычках (например, «Andale Mono»).
Если вы желаете распечатать версию этого
приложения в формате PDF, посетите наш,
сайт: www.webbedenvironments.com/dhtml.
В данном приложении приведены следую-
щие таблицы:
табл. D.l. Microsoft Internet Explorer
(MacOS и Windows);
табл. D.2. Mac OS;
табл. D.3. Microsoft Internet Explorer.
Шрифты, поддерживаемые браузером 14931
Таблица D.1. Microsoft Internet Explorer (MacOS и Windows)
Название Плотность и стили Семейство Пример
Adobe Minion Web Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Andale Mono* Monospace ABCDEFGHIJKLMNDPQRSTUVWXYZ abcdefghi jklmnopqrstuvwxyz 1234567890
Arial bold, italic, bold italic Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789D
Arial Black Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Comic Sans MS bold Cursive ASCDEF&HIJKLMNOPQfiSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Courier New bold, italic, bold italic Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Georgia bold, italic, bold italic Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Impact sans-serif ABCDEF6RUKlMK0PQK$TUVWXn
Times New Roman bold, italic, bold italic Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Trebuchet MS* bold, italic, bold italic Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Verdana bold, italic, bold italic Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Webdings Fantasy г»п'АШТ f «ф?.* jh» . ✓ : ses Off <
* Ранее назывался Monotype.com
14941 Приложение D
Таблица D2. Mac OS
Название Плотность и стили Семейство Пример
American Полужирный Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ
Typewriter* abcdefghyklnmopqrstuvwxyz 1234567890
Andale Mono** Monospace ABCDEFGHIJKLMNDPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567896
Apple Chancery Cursive 1234567890
Apple Symbols* Fantasy ABXAEOrHIdKAMNOnQPXTYgQH'PZ 1234567890
Arial Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567B90
Arial Black Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Arial Narrow* Полужирный, курсив, Sans-serif abcdefghijklmnopqrstuvwxyz
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Arial Rounded Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
MT Bold* abcdefghijklmnopqrstuvwxyz 1234567B90
Baskerville* Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxvz 1234567890
Big Caslon* Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Brush Script MT Cursive 1134567340
Capitals** Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
Charcoal** Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Chicago** Sans-serif ABCDEFGHIJKLMNOPQRSTUUIUHVZ abcdefghi jklmnopqrsluuiuHyz 125456789B
Cochin* Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Comic Sans MS Полужирный Cursive ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Copperplate* Полужирный Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
Courier’* Полужирный, наклонный Monospace AB CDE FGHIJKLMNO PQRSTUVWXY Z
полужирный наклонный abcdefghijklmnopqrstuvwxyz 1234567890
Courier New Полужирный, курсив, Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghij klmnopqrstuvwxyz 1234567890
Didot* Полужирный, курсив Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxvz 1234567890
Futura* Serif A8CDEFGHUKIMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Gadget’* Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Geneva Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Georgia Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Gill Sans* Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Шрифты, поддерживаемые браузером [495]
Таблица D.2 (окончание)
Название Плотность и стили Семействе Пример
Helvetica Полужирный, наклонный, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный наклонный abcdefghijklmnopqrstuvwxyz 1234567890
Helvetica Neue’ Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567B9O
Herculanum* Cursive А В C D 6 F С н и к L X-K N О P Q.R. f T W WKVZ. XBCDCFCHIJKLMNOPQAJTUVWXyZ 1234567890
Hoefler Text Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив Serif abcdetghqklmnopqrstuvwxyz 1234}6 / S9U
Impact Serif исоЕкиипмитюплткл
Marker Felt’ Fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Monaco Monospace A8CDEFGHIJKLMN0PQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
New York” Serif ABCDEFGHIIKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Optima’ Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Palatino” Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Papyrus’ Cursive ABCPEFGHIJKLMNOPQfUSTLJVWXYZ
Sand” Fantasy abcdef-ghijkimnopqrstuvwxqz 123>4-%/S9O ABO)EF6WJKWOPQR$riJUWXY2
Skia Symbol 113*567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 АвхдЕФгншклммперт^ЕЧ'г
Sans-serif Fantasy
с(р/_()сф7)']ктгкл!(Уол*!р<т’т<-)с1,!^ 1234567890 nBCDEFGHIJKLmnOPQRSTUUUJXVZ abcdefghijhlmnopqrstnuwxyz 1234567890
Techno” Fantasy
Textile” Cursive ABCDEFeHUKLMNOPQflSmVWXYZ abatefghuklmnotxirstuvwxyz 1234567890
Times Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Times Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZ
New Roman полужирный курсив abcdefghijklmnopqrstuvwxyz 1234567890
Trebuchet MS Verdana’ Полужирный, курсив, полужирный курсив Полужирный, курсив, полужирный курсив Sans-serif Sans-serif Fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Webdings
* . □•й®ИдФ-*+!<-йОХ?^а.®е® □ i9<
Zapf Dingbats* Fantasy o+“*^*->*vO*****->*#****»»*» eO***::!-r+***eDB0D3TIAV**MI
Zapfino’ Cursive
* Как в OS X; *’ - устанавливается в OS X только при условии установки Classic
* Как в Mac OS В.5
14961 Приложение D
Таблица D.3. Microsoft Internet Explorer
Название Плотность и стили Семейство Пример
Arial bold, bold italic, italic Arial Black Comic bold Sans MS Courier New bold, bold italic, italic Franklin Gothic italic Medium* Georgia bold, bold italic, italic Impact Lucid Console Lucida Sans Unicode Marlett Microsoft Sans Serif* Palatino bold, bold italic, italic Linotype Symbol Tahoma Times bold, bold italic, italic New Roman Trebuchet MS bold, bold italic, italic Verdana bold, italic, bold italic Webdings Wingdings bold, italic, bold italic * Касается Windows XP Serif Serif Cursive Monospace Serif Sans-serif Serif Sans-serif Serif Sans-serif Fantasy Serif Sans-serif Sans-serif Fantasy Fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345B7B90 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz I234567B9O ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567B90 ABCHEFGHUKIMHOPQRSTUVWXYZ abcdoWhljUniMMrstBnnyz 1234567800 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 * *Г_Г_|«» jr je,^ - x?-.~ ♦ ns < • _ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567B90 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 АВХДЕФГН1дКЛММОП0Р1ТУдйЖ аРх&ЕфУПГфкХцУояВротиетсо^^ 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 rtu АГМ-|"|Г11ГГ^ 1 o л - . se® □в <
СИМ-Ш-LI
ИШИДТУРИ
Е
Если посетитель вашего сайта нажимает
клавишу, это генерирует событие, кото-
рое включает числовое значение для на-
жатой клавиши.
В следующих таблицах мы приводим спи-
сок значений, которые генерируются стан-
дартной клавиатурой U.S. English и опреде-
ляются с помощью триггеров onkeyup и
onkeydown. Чтобы получить дополнитель-
ную информацию о символах клавиатуры,
обратитесь к разделу «Какая клавиша была
нажата» в главе 13.
ШЕсть еще один способ взаимодействия с
посетителем с помощью клавиатуры (без
JavaScript). Это атрибут accesskey, описан-
ный в примечании «Использование кла-
виш доступа» к главе 1В.
В данном приложении приведены следую-
щие таблицы:
табл. Е.I. Буквы;
табл. Е.2. Цифры;
табл. Е.З. Символы пунктуации;
табл. Е.4. Числовая клавиатура;
табл. Е.5. Управление.
[4961 Приложение E
Таблица E.1. Буквы Таблица Е.2. Цифрь
Символ Значение Символ Значение
А 65 0 46
В 66 1 49
С 67 2 50
D 66 3 51
Е 69 4 52
F 70 5 53
G 71 6 54
Н 72 7 55
I 73 8 56
J 74 9 57
К 75
L 76
М 77
N 78
0 79
Р ео Таблица Е.З. Символы пунктуации
Q 81 Символ Значение
R 62 59
S 83 = 61
Т 84 .(comma) 188
и 85 190
V 86 / 191
W 87 7 192
X 88 [ 219
Y 89 \ 220
Z 90 1 221
222
Символы клавиатуры 14991
Таблица Е.4. Числовая клавиатура Таблица Е.5. Управление
Символ Значение Символ Значение
О 96 Backspace* e
1 97 Tab 9
2 98 Num Lock 12
3 99 Enter/Retum 13
4 100 Caps Lock 20
5 101 Esc 27
6 102 Spacebar(Пробел) 32
7 ЮЗ Page Up 33
8 104 Page Down 34
9 105 End 35
109 Home 36
* 106 Arrow Left 37
110 Arrow Up 38
/ 111 Arrow Right 39
+ 107 Arrow Down 40
Insert 45
Delete 46
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F6 119
F9 120
F10 121
F11 122
F12 123
* На Мас клавиша Delete
ИОУМШ11
И РССЖ11
F
Я надеюсь, что эта книга открыла вам гла-
за на возможности DHTML и CSS, а также
дала вам начальные знания, которые не-
обходимы для создания Web-страниц. Но
данная книга завершена, а сеть Internet
если не бесконечна, то почти бесконечна.
В этом приложении мы расскажем о ре-
сурсах, которые помогут вам при работе
в сети Internet.
Программное обеспечение
Одна из великолепных возможностей, ко-
торые предоставляет Сеть, - быстрый до-
ступ к любому программному обеспече-
нию. Необходимые для Web-дизайнеров
программы, которые пылились бы на
полках магазинов, стали очень популяр-
ными н нашли свою аудиторию.
Инструменты и ресурсы 15011
Рис. F.1. Screen Ruler
. » лл CKrxwt Троил -. . . „
И <S "I M I и в
: *C< CMVX Symbol TiitSUo Scuo CoIutmi
Рис. F.2. Art Director’s Toolkit
Screen Ruler (Mac/Win)
www.kagi.com/microsoft
Некоторые идеи настолько очевидны, про-
сты и полезны, что каждый раз, используя
их в своей работе, вы задаетесь одним и
тем же вопросом: «Почему я сам до этого
не додумался?» Таким изобретением явля-
ется и программа Screen Ruler (рис. F.1).
Она помещает на экран линейку, которой
вы можете пользоваться независимо от
того, какие программы в данный момент
запущены. Программа позволяет опреде-
лить положение объекта в окне браузера,
например указать точный размер графи-
ческого изображения или задать парамет-
ры таблицы.
Art Directors Toolkit
(Mac/Win)
www.code-line.com/software/
artdirectorstoolkit.html
Art Director’s Toolkit представляет собой
отличный инструмент для работы с ди-
зайном. Если вы работаете над дизайном
в сети Internet или при печати, эта про-
стая в использовании программа способ-
на сэкономить массу вашего времени и
сил. Одна из полезных функций програм-
мы: вы можете выбрать любой пиксель на
экране - и вам покажут цвет данного пик-
селя в шестнадцатеричном коде, RGB и
CMYK (рис. F.2).
15021 Приложение F
Палитры цветов, поддерживаемых
браузером (Mac/Win)
www.lvnda.com/files/CLUTS
www.visibone.com/swatches
Лиида Винман (Lynda Wynman), автор
популярной концепции цветов, поддер-
живаемых браузером, разместила на ука-
занном сайте копии палитр цвета, кото-
рые применяются в наиболее известных
графических программах, таких как
Photoshop, FreeHand, Paint Shop Pro и
Illustrator. Я рекомендую воспользовать-
ся коллекцией образцов, имеющихся на
сайте Visibone, где они представлены в
дружественном пользователю формате
(рис. F.3).
Таблицы цветов (CLUT) позволяют полу-
чить быстрый доступ к цветам, поддер-
живаемым браузером, независимо от ус-
тановленного на вашем компьютере про-
граммного обеспечения.
GlFBuilder (Мас)
и GIF Construction Set (Win)
homeDaae.nac.com/Diouet/qif.htrnl
www.mindworkshoo.com/alchemv/gifcon.html
В настоящее время рынок программного
обеспечения переполнен сложными про-
граммами для создания анимированных
GIF-файлов. Однако нельзя оставить без
внимания такие инструменты, как GlFBuil-
der (рис. F.4) и GIF Constructor (рис. F.5), ко-
торые позволяют быстро и легко создавать
анимацию непосредственно в програм-
ме Photoshop. Одной из малоизвестных
возможностей GlFBuilder является обра-
ботка файла Photoshop, включающего
слои, и преобразование каждого слоя в от-
дельный кадр. Указанные программы
распространяются в Сети совершенно
бесплатно.
Рис. F3. Таблица цветов GLUT от Visibone
в Photoshop
Рис. F.4. Программа GlFBuilder
Инструменты и ресурсы 15031
Рис. F.5. Набор GIF Constructor
Рис. F.6. Программа Graphicconverter
Graphicconverter (Mac)
и Lview Pro (Win)
www.lemkesoft.de/us ocabout.htmlwww.lview.com
Хотя GraphicConverter (рис. F.6) ие такая
сложная программа, как Photoshop (с точ-
ки зрения редактирования изображения),
она помогала мне открывать файлы в та-
ких форматах и кодировке, перед кото-
рыми пасовали самые сложные програм-
мы. К тому же GraphicConverter легко мо-
жет преобразовать любое число графи-
ческих файлов из одного формата в
ДРУГОЙ.
StyleMaster (Mac/Win)
www.westciv.com/style-master/
Если вы устали от ручного программирова-
ния кода CSS и нуждаетесь в более простой
и дешевой программе, чем Dreamweaver
или GoLive, вам нужен StyleMaster. Эта про-
грамма позволяет кодировать вручную или
использовать удобные меню и кнопки.
Кроме того, она проверяет ваш код на пред-
мет совместимости с браузерами (рис. F.7).
Рис. F.7. StyleMaster
15041 Приложение F
В режиме реального
времени
Сеть позволяет получить доступ практи-
чески к любому программному обеспече-
нию, а кроме того, многие Web-сайты
предлагают функции, с помощью которых
можно усовершенствовать свой сайт.
Webmaster’s Color Lab
www.visibone.com/colorlab
Данный инструмент, созданный компани-
ей Visibone, позволяет быстро определить
палитру цветов для Web-сайта (рис. F.8).
Цвета располагаются рядом, и дизайнер
способен оценить то или иное цветовое
сочетание. Один кадр содержит цветное
кольцо, в котором вы найдете все цвета,
поддерживаемые браузером. Если щелк-
нуть по какому-либо цвету, его образец
появится в соседнем кадре. Допустимо
указывать любые понравившиеся вам цве-
та - их образцы отобразятся рядом с пер-
вым. Webmaster’s Color Lab позволяет по-
местить в образце все ранее выбранные
цвета; таким образом, вы легко можете их
сравнить.
Рис. F.8. Инструмент Webmaster’s Color Lab
Рис. F.9. Тестовый пакет CSS1 от W3C
Тестовый пакет CSS1
www.w3.org/Stvle/CSS/Test
Чтобы узнать, какие возможности CSS
поддерживает ваш браузер, запустите его
через тестовый пакет W3C для CSS1
(рис. F.9). В этом пакете учитываются все
свойства CSS. Он особенно полезен в том
случае, когда вам необходимо убедиться,
что тип CSS, который вы планируете ис-
пользовать, действительно будет правиль-
но функционировать. Но это следует сде-
лать до того, как вы столкнетесь со всеми
остальными проблемами, возникающими
при создании Web-сайта.
Инструменты и ресурсы 15051
Рис. F.10. Сайт УУЗС-консорциум
Web-сайты:
технология и стандарты
В книге я постарался рассказать обо всех
аспектах Web-разработки, однако еще мно-
гое осталось за кадром. На нижеперечис-
ленных сайтах вы сможете найти дополни-
тельные сведения о DHTML и CSS.
М/ЗС-консорциум
www.w3.org
На данном сайте вы найдете подробную
информацию обо всех Web-стандартах.
Нужны ли вам сведения о последних из-
менениях в объектной модели документа
или рекомендации по CSS первого уровня,
этот сайт - единственный, куда стоит об-
ратиться и в первом, и во втором случае
(рис. ЕЮ):
каскадные таблицы стилей (www.w3.org/
Style/CSS/);
объектная модель документа
(www.w3.org/DOMZ).
Рис. F.11.CSS: A Guide for the Unglued
~ u ЬшШвлив '
Рпгему sis in USA: «»:«АаВДийЯ>
Рис. F.12. Помощь no HTML
CSS: A Guide for the Unglued
(www,thenoodleincident.com/tutorials/css/)
Этот Web-сайт представляет собой ресурс
для тех, кто желает больше узнать о разра-
ботке сайтов с помощью CSS (рис. F.11).
Помощь по HTML
от Web Design Group
www.htmlhelo.com
Посетив данный сайт, я сам впервые узнал,
что такое CSS. С тех пор как я решил свя-
зать свою работу со спецификациями W3C,
именно иа этом сайте я нашел наиболее
полную информацию о HTML. Возможно,
он оформлен не столь привлекательно, как
остальные Web-сайты, однако только здесь
вы получите самые подробные и понятные
объяснения Web-стандартов (рис. F.12).
15061 Приложение F
Проект Web-стандартов
www.webstandards.org
Эта группа не устанавливает какие-либо
стандарты, в ее функции входит контроль
за соблюдением стандартов производите-
лями браузеров. Группа также проводит
кампанию по усовершенствованию брау-
зеров, чтобы помочь разработчикам как
можно ближе подвести свои проекты к
стандартам (рис. F.13).
WebReference
www.webreference.com
На сайте WebReference в основном содер-
жится информация об интерфейсе Web-
сайтов, приводятся статьи о практичес-
ком использовании DHTML, CSS и дру-
гих технологий (рис. F.14).
Apple Developer Connection -
Internet-разработчик
developer.aDDle.com/internet
Сайт Apple Developer Connection более
интересен для дизайнеров, работающих
на Macintosh, однако здесь вы сможете
найти информацию, полезную для любо-
го Web-разработчика (рис. F.15).
р*се
DEVELOPMENT
Рис. F.1 з. Проект Web-стандартов
Рис. F.14. Сайт WebReference.com
Рис. F.15. Apple Developer Connection -
Internet-разработчик
Инструменты и ресурсы 15071
Рис. F.16. Часто задаваемые вопросы о DHTML
Рис. F.17. BrainJar.com
Рис. F.18. Сайт поддержки книги
Часто задаваемые вопросы
о DHTML
www.faats.com/knowledge Jjase/
index.phtml/fid/128
Этот сайт - один из моих любимых ресур-
сов. Если у вас есть вопрос о DHTML, CSS
или JavaScript, щелкните по указанной
ссылке. Скорее всего, такой вопрос уже
обсуждался на данном сайте и вы найдете
подробный ответ и разъяснения профес-
сионалов (рис. F.16).
BrainJar.com
(www.brainiar.com)
Здесь вы можете найти все от базовых
обучающих программ до сложных скрип-
тов, причем все они полностью соответ-
ствуют самым строгим стандартам CSS.
Сайт хорошо сделан, и интерфейс удобен
для работы (рис. F.17).
DHTML для Всемирной паутины
www.webbedenvironments.com/dhtml
На сайте поддержки данной книги содер-
жатся все коды, приведенные ранее, рабо-
ту которых допустимо просмотреть в ре-
жиме реального времени. Для экономии
времени можете загрузить программы не-
посредственно с сайта, чтобы не перепи-
сывать их с книги. Кроме того, на этом
сайте я буду размещать дополнения и ис-
правления (рис. F.18).
5081 Приложение F
Web-сайты: дизайн и теория
Для создания эффективного Web-сайта тре-
буется больше, нежели понимание прин-
ципов работы кода. Необходимо знать, как
построить удобный для пользователя ин-
терфейс.
CSS Discuss
www.css-discuss.org
Если у вас есть вопросы о CSS, здесь вы
получите ответы. Присоединитесь к об-
суждению, задавайте вопросы и даже от-
вечайте на вопросы других пользователей
(рис. F.19).
GlassDog
www.alassdoa.com/design-o-rama
На этом сайте вы найдете много полезной
и интересной информации о Web-дизайне.
Сведения изложены хорошим профессио-
нальным языком с соблюдением соответ-
ствующей терминологии, материал подо-
бран таким образом, чтобы осветить все ас-
пекты рассматриваемой темы (рис. F.20).
A List Apart
www.alistapart.com
A List Apart представляет собой Internet-
журнал со статьями по дизайну, разработ-
ке и Web-содержимому. Данное издание
концентрируется на методиках, которые
используют Web-стандарты (рис. F.21).
css-discuss org
Рис. F.19. CSS Discuss
Рис. F.20. Сайт Glass Dog
Рис. F.21. A List Apart
Инструменты и ресурсы 15091
Рис. F.22. Web-комиксы от Скотта МакКлауда
Скотт Макклауд
www.scottmccloud.com
Скотт Макклауд (Scott McCloud) вошел
в индустрию Internet совершенно неожи-
данным образом. Книга этого известного
создателя комиксов - «Понимание комик-
сов» (Understanding Comics) - стала класси-
кой Web-дизайна в середине 90-х годов. На
сайте основное внимание уделено Web-ко-
миксам, однако оригинальные авторские
решения будут интересны и чрезвычайно
полезны любому дизайнеру (рис. F.22).
Рис. F.23. Glish CSS Layout Techniques
Рис. F.24. Сайт Useit.com
Glish CSS Layout Techniques
www.qlish.com/css
Этот Web-сайт фокусирует внимание на
использовании CSS вместо табличных
Web-дизайнов. Здесь вы найдете несколь-
ко отличных методик построения масш-
табируемых дизайнов, состоящих из не-
скольких столбцов (рис. F.23).
Useit.com
www.useit.com
Как и на предыдущем сайте, здесь содер-
жатся статьи, которые помогают улуч-
шить Web-сайты с точки зрения простоты
и удобства использования. Лично я не все-
гда согласен с выводами, представленны-
ми авторами сайта, однако многие их идеи,
безусловно, интересны и весьма ориги-
нальны (рис. F.24).
15101 Приложение F
Web Page Design для дизайнеров
www.wpdfd.com
Создатель сайта, Джо Джиллеспай (Joe
Gillespie), разместил на нем огромное ко-
личество статей, которые помогут дизай-
нерам переносить информацию из печат-
ного варианта в Web. Даже ветераны сете-
вых войн найдут здесь много полезных
сведений (рис. F.25).
webbedENVIRDNNIENTS
www.webbedenvironments.com
Это мой собственный Web-сайт, где я
пишу о пересечениях технологии и куль-
туры, концентрируясь на том, как сеть
Internet влияет иа наше мышление. Также
я делюсь с вами всеми методиками, кото-
рые мне удалось открыть (рис. F.26).
Рис. F.25. Сайт Web Page Design для дизайнеров
Рис. F.26. webbedENVIRONMENTS
Инструменты и ресурсы |511j
Рис. F.27. Panic Software
Рис. F.28. International Herald Tribune
Рис. F.29. Сайт The Sandman
Примеры Web-сайтов
С каждым днем возрастает число сайтов,
использующих DHTML. Я рекомендую по-
сетить наиболее, на мой взгляд, удачные.
Panic Software
www.panic.com
Компания Panic производит качественное
программное обеспечение для Mac OS X,
но на ее домашней странице имеется и
впечатляющий DHTML-интерфейс, кото-
рый позволяет вам с помощью мыши пе-
ремещать иконки для загрузки (рис. F.27).
International Herald Tribune
www.iht.com
Это не только одна из лучших газет в сети
Internet, она также обладает отличным
дизайном с элегантным и дружественным
интерфейсом, созданным с помощью
DHTML. Удачные дополнения включают
динамичное меню Clippings и функцию
переключения между режимами просмот-
ра с одним и тремя столбцами без необ-
ходимости перезагружать страницу. Если
вы серьезно интересуетесь DHTML-ин-
терфейсами, внимательно изучите дан-
ную страницу (рис. F.28).
Sandman Film
www.sandmanfilm.org
При создании этого сайта я активно ис-
пользовал возможности DHTML. Здесь
представлен эффект киноленты, когда
кадры прокручиваются по горизонтали в
зависимости от того, какой раздел вы
выбираете в меню, расположенном в
нижней части страницы (рис. F.29).
|~512~| Приложение F
Kaliber 10000
www.k10k.com
Kaliber 10000, который больше известен как
К10К, - популярный сайт, куда Web-дизай-
неры заходят в поисках самых современных
идей. Здесь вы можете узнать о новых ме-
тодах интеграции DHTML в интерфейс сво-
его сайта (рис. F.30).
Tantek CSS Examples
tantek.com/CSS/Examples
Этот сайт показывает ряд примеров удач-
ного и простого использования CSS. Он
способен вдохновить вас на творчество
(рис. F.31).
Рис. F.30. Сайт Kaliber 10000
CSS Examples
Рис. F.31. Tantek CSS Examples
Книги, журналы и другие
публикации
Помимо Internet существует множество
печатных изданий, призванных помочь
вам в познании нелегкого, но захватываю-
щего дизайнерского искусства.
Визуальное представление
Печатное слово играет в нашей жизни
немалую роль^ но удивительно, насколь-
ко лучше информация воспринимается
не со словесных объяснений, а с визуально
представленного материала. Как говорит-
ся, лучше один раз увидеть, чем сто раз ус-
лышать. В книге Эдварда Тюфта «Визуаль-
ное представление: изображения и количе-
ство, очевидность и изложение» (Edward
Tufte «Visual Explanations: Images and
Quantities, Evidence and Narrative»; издатель-
ство Graphics Press) рассматривается слож-
ность передачи информации посредством
визуальных элементов, а также говорится о
важной роли, которую играет зрительное
восприятие в нашей жизни.
Понимание комиксов
Ранее я уже упоминал великолепный сайт
Скотта Макклауда, стоит рассказать и о его
книге «Понимание комиксов» («Understan-
ding Comics»; издательство Kitchen Sink
Press). На примере комиксов автор рас-
сматривает проблему визуального взаимо-
действия с читателем. Если вы хотите кос-
нуться изумительного мира чудес, мира пе-
редачи информации посредством изобра-
жений, я настоятельно рекомендую вам
прочитать эту книгу.
Инструменты и ресурсы |513|
Невидимый компьютер
«Люди не хотят пользоваться компьюте-
ром, они хотят, чтобы их проблемы ре-
шались». Такое справедливое замечание
сделал Дональд А. Норман в своей книге
«Невидимый компьютер: почему хоро-
шие товары могут не пользоваться спро-
сом. Персональный компьютер слишком
сложен, будущее - за информационны-
ми устройствами» (Donald A. Norman
«Invisible Computer: Why Good Products
Can Fail, the Personal Computer is So
Complex and Information Appliances Are
the Solution»; издательство MIT Press).
Это прекрасная книга о философии со-
здания продуктов, которые распространя-
ются с помощью компьютеров.
|~514| Приложение F
Computer Arts
www.comouterarts.co.uk
Каждый .месяц выходит новый номер это-
го журнала с подсказками и подробными
инструкциями, а также статьями, которые
очень полезны для дизайнеров. Журнал
Computer Arts выходит в Великобритании,
но я видел его на полках многих магазинов
в США и в сети Internet (рис. F.32).
Visibone HTML и CSS Card
www.visibone.com/html
Visibone HTML и CSS Card - отличный до-
кумент для каждого пишущего Internet-
программы. На четырех страницах содер-
жится практически все, что нужно знать о
тэгах HTML и свойствах CSS, включая ат-
рибуты, значения, совместимость браузе-
ров, ошибки в программах и специальные
символы. Этот документ необходимо
иметь под рукой любому Web-дизайнеру
(рис. F.33).
Рис. F.32. Web-сайт Computer Arts
Рис. F.33.. Web-сайт Visibone HTML и CSS Card
пщмши
шжш
А
Абзац, отступ 123
Адрес на Web-странице 225
Б
Блок плавающий 426
Браузеры
возможности 242
новое окно 326
стандарты 483
iCab 491
Internet Explorer 486
Konqueror 491
mozilla 489
netscape 487
OmniWeb 491
opera 490
safari 489
Буквица 77
в
Версии CSS 29
Видимость 187
Визуальный редактор
Dreamweaver 438
Внутренний отступ 158
Всплывающий гипертекст 388
Выравнивание
вертикальное 121
текста 119
стиль 120
г
Графика векторная 96
д
Дизайн и содержание 354
Динамический HTML. См. DHTML
Динамические технологии CSS 337
Документ 168
3
Заголовки 376
с фоном 376
фиксированные 378
и
Изображение на заднем плане 164
Импорт внешнего содержимого
внешний файл JavaScript 354
Индекс
верхний 121
нижний 121
Интервал
между словами 115
междустрочный 116
Информация
об объекте 264
о событии 282
15161 DHTML и CSS для Internet
К
Кадр опорный 437
Каскадные таблицы стилей. См. CSS
Кернинг 113
Класс
зависимый 64
правила 62
селектор 63
Колонтитул 361
Комментарии в CSS 91
м
Меню
выдвижное 400
выпадающее 391
сворачивающееся 397
н
Навигация на сайте 382
выдвижное меню 400
общий стиль ссылок
раскрывающееся меню 397
панель управления 404
сложный стиль ссылок 383
Наследование стилей 82
о
Обработчики событий 321
Объекты 66
анимация 318
видимость 294
перемещение 300, 323
создание 229
Объектная модель документа 224
Окно браузера
новое 326
перемещение 330
Определение
группа 69
изменение 345
CSS для ОС посетителя 338
Основы CSS 47
Отладка кода 453
CSS
ошибки 454
проверка 456
JavaScript
ошибки 458
проверка кода 460
различия между браузерами 463
Палитра, объекты 427
Панель управления 404
Печать Web-страницы 88
Поддержка браузера DHTML 483
Internet Explorer 485
версия 4 485
версия 5 для MacOS 486
Netscape Navigator
версия 6 488
Opera 490
Позиционирование
абсолютное 171
окна браузера 330
относительное 170
статическое 170
Положение свободное 181
Полоса прокрутки 408
Порядок стека 179
Прокрутка страницы 262
Псевдо класс 75
Псевдоэлемент 77
Р
Развитые динамические технологии 314
Размер
клиентской области окна 260
объекта 267
окна браузера 258
изменение 332
экрана 253
Режим
совпадений 41
строгого рендерирования 42
Предметный указатель 15171
Свойства
наследованные
отмена 85
правила 32
Селектор
контекстуальный 71
подчиненный 72
правила 32
родительский 72
Создание
цитаты 374
заголовков 376
Событие
обнаружение 233
обработчик 231
тип 282
Специальные эффекты
тень
простая 380
указатель мыши 416
Список 197
вид маркера 199
висячий отступ 202
маркер
создание собственного 200
Средства управления
всплывающий гипертекст 388
полоса прокрутки 408
слайд-шоу 419
Стиль 25
каскадный порядок 86
наследование 82
тега 48
Страница, разрыв 133
т
Таблицы стилей 366
изменение 351
импорт 58
каскадные 26
Текст
HTML 96
векторный 96
выравнивание
вертикальное 121
горизонтальное 119
графический 96
динамический 118
украшения 128
Технология
Flash 221
SVG 37
XHTML 37
XML 36
XSL 36
Теги
inline 43
блок-уровня 43
дочерние 70
замененные 43
набор 70
переопределение 61
подчиненные 66
родительские 66, 70, 82
Триггеры событий 233
У
Узел 225
Указатель мыши 206
форма 207
Украшение текста 128
Управление
текстом 112
шрифтом 113
Устранение ошибки в Netscape CSS 341
Ф
Фон
фоновая картинка 159
цвет 159
Формы стилей 368
15181 DHTML и CSS для Internet
Фреймы
границы 372
динамическое содержание 311
стилей 372
Функции
addRuie 348
annouingFlash 316
changeStyle 346
changeWindowSize 333
closeWindow 327
findBottom 272
findClipArray 281
findClipBottom 281
findClipLeft 281
findClipRight 281
findCIipTop 281
findDOM 244, 245
findHeight 267
findLayer 274, 304
findLivePageHeight 260
findLivePageWidth 261
findModifiierKey 288
findMouseLocation 292
findObjectID 266
findRight 272
findScrollLeft 262
findScrollTop 262
findTop 270
findvisibility 276
fullScreen 334
initAnimate 320
initPage 240, 274
magnifyWindowSize 333
menuOut 393
moveObjectBy 302
moveObjectTo 300
openWindow 326
passItOn 238
popHide 389
scroIlPageTo 335
setClass 349
setClip 281,308
setDisplay 298
setLayer 304
setUpAnnouingFlash 315
setvisibility 295
swapLayer 304
togglevisibility 296
toggleWindow 327
рекурсивная 314
Функционирование DOM 235
Ц
Цвета фона 163
ш
Шрифт 94
размер 102
семейство 95
тип 95
Cursive 95
Fantasy 95
Monospace 95
Sans-serif 95
Serif 95
толщина 106
управление 94
установленный по умолчанию 99
3
Элемент 66, 135
внутренний отступ 136
поле 136
положение 170
рамка 136
содержимое 136
стороны 136
Эффекты
«вдов» 126
«сирот» 126
Предметный указатель |518|
С
CSS 26
ID-правило 31
версии 29
добавление на Web-страницу 50
класс 31
правила 31
CSS-файл внешний 53
D
DHTML 213
в Microsoft 216
в Nescape 216
преимущества 218
Document Object Model 224
DOM 224
F
Flash 219
недостатки 221
преимущества 220
G
GoLive 423
H
HTML-селектор
определение 61
ID 65
M
Menu sliding 401
R
Remote control 404
s
Scrollbar 408
Style 25
u
Uniform Resource Locator 19
URL 19
глобальный 19
локальный 19
w
Word spacing 115
World Wide Web Consortium
(W3C) 33,224
WYSIWYG 423
z
Z-индекс 179
Джейсон Кренфорд Тиге
DHTMLhCSS
для Internet
Главный редактор Захаров И. М.
editor-in-chief@dmkpress.ru
Перевод
Научный редактор
Ответственный редактор
Верстка
Графика
Дизайн обложки
Осипов А. И.
Крупин А. М.
Павлова О. Н,
Алехина А. Б.
Салимонов Р. В.
Дудатий А. М.
Издательство «НТ Пресс», 129085, Москва, Звездный б-р, д. 21, стр. 1
Издание осуществлено при техническом участии
ООО «Издательство АСТ»
Отпечатано с готовых диапозитивов во ФГУП ИПК
«Ульяновский Дом печати». 432980, г. Ульяновск, ул. Гончарова, 14