DHTML и CSS

DHTML И CSS

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

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

VISUAL QUICKSTART GUIDE
dhtml and css

FOR THE WORLD WIDE WEB

2ND EDITION

Jason Cranford Teague

Москва

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

БЫСТРЫЙ СТАРТ
Dhtml и css

УДК
004.738.5

ББК
32.973.26-018.2
Т39

Тиге Дж. К.

DHTML и CSS: Пер. с англ. – М.: ДМК Пресс. – 5
с.: ил. (Быстрый старт).

ISBN 5-94074-169-X

Т39

Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то

ни было форме и какими бы то ни было средствами без письменного разрешения владельцев
авторских прав.

Материал, изложенный в данной книге, многократно проверен. Но, поскольку вероятность

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

Copyright © Peachpit Press

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

ДМК Пресс

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

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

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

Рассматриваются способы применения каскадных таблиц стилей, проблемы реализации
поддержки CSS в различных браузерах, использование JavaScript и объектной модели документа (DOM) для манипулирования содержимым страниц без их перезагрузки с сервера.

Изложение материала сопровождается множеством примеров, даются советы по планированию структуры сайта и его дизайну. Кроме того, анализируются наиболее распространенные ошибки, допускаемые при программировании.

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

Authorized translation from the English language edition, entitled DHTML AND CSS FOR THE
WORLD WIDE WEB: VISUAL QUICKSTART GUIDE, 2nd Edition by TEAGUE, JASON CRANFORD,
published by Pearson Education, Inc, publishing as Peachpit Press, Copyright © TEAGUE, JASON
CRANFORD.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording or by any infomation storage
retrieval system, without permission from Pearson Education, Inc.

RUSSIAN language edition published by DMK Press, Copyright ©.

58

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

Благодарности

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

Содержание

Введение ................................................................................................................... 15

Часть I.
Каскадные таблицы стилей .......................................... 23

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

DHTML и CSS

Глава 3.
Управление шрифтом................................................................... 78
Оформление в Web .............................................................................. 79
Способы представления текста в Web ............................................. 80
Установка шрифта ............................................................................... 81
Загрузка шрифтов ................................................................................ 83
Шрифты в браузере .............................................................................. 85
Размер шрифта ...................................................................................... 87
Курсив...................................................................................................... 89
Толщина шрифта.................................................................................. 91
Создание minicaps ................................................................................ 92
Определение нескольких значений шрифта одновременно.......... 94
Глава 4.
Управление текстом ...................................................................... 96
Кернинг.................................................................................................... 97
Интервал между словами ................................................................... 98
Межстрочные интервалы .................................................................... 99
Заглавные и строчные буквы ............................................................. 101
Выравнивание текста по правому, левому краю
и по центру ............................................................................................. 102
Вертикальное выравнивание текста ................................................. 103
Выделение абзацев в тексте ............................................................... 104
Украшение текста ................................................................................. 106
Управление свойствами пробелов .................................................... 108
Установка разрыва страницы для печати ....................................... 110
Глава 5.
Управление списками и указателем мыши...................... 112
Списки ..................................................................................................... 113
Виды маркеров ...................................................................................... 115
Создание висячих отступов ................................................................ 116
Создание собственных маркеров...................................................... 117
Форма указателя мыши....................................................................... 119
Глава 6.
Управление цветами и фоном ................................................. 121
Установка отдельных свойств фона ................................................ 124
Установка цвета на переднем плане ................................................ 129
Глава 7.
Управление рамками и полями ............................................... 130
Что такое элемент ................................................................................ 131
Ширина и высота элемента ................................................................ 133
Поле элемента ....................................................................................... 135
Рамка элемента...................................................................................... 137
Атрибуты рамки.................................................................................... 139
Внутренний отступ ............................................................................... 141

Содержание

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

Глава 8.
Управление позиционированием ........................................... 150

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

Глава 9.
Управление видимостью элемента ...................................... 167

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

Часть II.
Динамический HTML ............................................................. 173

Глава 10. Назначение DHTML ........................................................................ 174

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

Глава 11. Объектная модель документа ................................................. 182

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

DHTML и CSS

Глава 12. Среда, в которой вы работаете .............................................. 207
Название и версия браузера ................................................................ 207
Тип операционной системы ............................................................... 210
Размеры экрана...................................................................................... 212
Количество цветов ............................................................................... 214
Размеры окна браузера ........................................................................ 216
Размеры клиентской области окна ................................................... 217
Адрес и название страницы ................................................................ 219
Положение прокрутки страницы ..................................................... 220
Размеры объекта ................................................................................... 222
Левая и верхняя позиции объекта ..................................................... 224
Правая и нижняя позиции объекта ................................................... 226
Z-индекс объекта .................................................................................. 228
Состояние видимости объекта .......................................................... 230
Видимая область объекта ................................................................... 232
Глава 13. Основы динамических технологий........................................ 236
Отображение и сокрытие объектов ................................................. 236
Перемещение объектов....................................................................... 239
Перемещение объекта на заданное расстояние ............................ 241
Перемещение объектов в 3D ............................................................. 243
Прокрутка Web-страницы ................................................................. 246
Видимая область объекта ................................................................... 248
Глава 14. Развитые динамические технологии .................................. 250
Повторный запуск функции .............................................................. 250
Передача события в функцию........................................................... 253
Глобальный обработчик событий..................................................... 254
Анимационные объекты ..................................................................... 256
Нахождение положения указателя мыши ...................................... 259
Идентификация объекта на экране .................................................. 261
Управление содержанием во фреймах ............................................ 263
Позиционирование окна браузера.................................................... 266
Новое окно браузера ............................................................................ 268
Размеры окна ......................................................................................... 272
Глава 15. Динамические технологии CSS .............................................. 275
Изменение определения ...................................................................... 276
CSS-класс объекта ................................................................................ 278
Добавление нового правила ............................................................... 280
Отмена таблицы стилей ...................................................................... 281
Глава 16. Слои Netscape ................................................................................... 283
Что такое слой Netscape...................................................................... 284
Создание слоя ........................................................................................ 285

Содержание

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

Глава 17. Internet Explorer для Windows .................................................. 297

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

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

Глава 18. Знакомство с GoLive ...................................................................... 304

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

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

Глава 20. Понятие о динамических Web-сайтах ................................. 332

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

Глава 21. Создание динамического Web-сайта ................................. 344

Шаг 1. Проектирование ....................................................................... 345
Шаг 2. Разработка.................................................................................. 348
Шаг 3. Реализация ................................................................................. 352

DHTML и CSS

Глава 22. Разметка Web-страницы ............................................................ 355

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

Тэги <ilayer> и <iframe> ..................................................................... 382
Включения на стороне сервера.......................................................... 384
Внешний файл JavaScript..................................................................... 385
Изучение работы других сайтов ....................................................... 387
Глава 24. Навигация Web-сайта .................................................................. 389
Определение стилей ссылок .............................................................. 390
Определение различных стилей для ссылок ................................. 393
Выпадающее меню ............................................................................... 395
Выдвижное меню .................................................................................. 400
Панель управления сайтом ................................................................. 403
Раскрывающееся меню........................................................................ 407
Уточняющее меню ............................................................................... 410
Навигация для браузеров, не поддерживающих DHTML
и CSS ......................................................................................................... 415
Дополнительные возможности.......................................................... 416
Глава 25. Средства управления ................................................................... 419

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

Содержание

Глава 26. Специальные эффекты ............................................................... 451
Буквица ................................................................................................... 452
Простая тень .......................................................................................... 454
Объемная тень ....................................................................................... 455
Фединг HTML-текста ........................................................................... 459
Отслеживание указателя мыши ........................................................ 463
Движущиеся объекты .......................................................................... 467
Прозрачная графика в формате PNG .............................................. 470
Создание часов ...................................................................................... 474
Глава 27. Мультимедиа ..................................................................................... 476
Использование звука в Web ................................................................ 477
Анимация в формате GIF .................................................................... 478
Назначение GIF-анимации .................................................................. 482
Flash-анимация ...................................................................................... 484
Видео в Internet ...................................................................................... 490
Добавление Java-апплетов .................................................................. 492
Глава 28. Отладка кода ..................................................................................... 494
Обнаружение ошибок CSS .................................................................. 495
Проверка CSS-правила......................................................................... 497
Определение ошибок в коде JavaScript ........................................... 499
Различия между браузерами .............................................................. 502
Глава 29. Будущее динамического Internet ........................................... 504
Необходимость стандартов ............................................................... 505
Extensible Markup Language ................................................................ 507
Extensible Hypertext Markup Language ............................................. 509
Преобразование HTML в XHTML..................................................... 510
Synchronized Multimedia Integration Language ............................... 512
Масштабируемая векторная графика ............................................. 513
CSS третьего уровня ............................................................................. 514

Приложения .................................................................................................................. 515

Приложение 1. Браузеры, поддерживающие DHTML и CSS ....... 516

Internet Explorer......................................................................... 517
Netscape Navigator .................................................................... 518
Другие браузеры ....................................................................... 519
Приложение 2. Краткая справка о CSS .................................................... 520

Краткая справка ........................................................................ 521

DHTML и CSS

Приложение 3. Краткая справка о DHTML ............................................. 529
Служебные слова ...................................................................... 532
Приложение 4. Шрифты, поддерживаемые браузером................. 534

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

введение

Раньше создание Web-страниц было несложным делом. Вы написали несколько
тегов, вставили несколько картинок, и страница готова. Теперь, с появлением потокового видео, JavaScript, CGI, Shockwave, Flash
и Java создание Web-страниц может показаться трудной задачей для любого, кто не
хочет стать программистом.

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

Введение
16

Содержание книги

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

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

во второй части рассказывается об использовании объектной модели документа (Document Object Model – DOM)
совместно с CSS и JavaScript для создания основных функций, обеспечивающих работу динамических (меняющих
свои атрибуты) элементов страницы.
Показано, как создать DOM, позволяющую запускать эти функции при помощи коротких программных кодов во
многих браузерах;

в третьей части описывается способ создания DHTML и CSS посредством двух
наиболее популярных программ для
редактирования Web-страниц – Adobe

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

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

Читательская аудитория

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

Значения и единицы

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

Каждый является Web-дизайнером

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

Значения и единицы

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

Длина

Размерности длин можно разделить на две
части:

относительные длины, которые зависят
от типа компьютера (табл. 2);

абсолютные длины, которые одинаковы
для любого типа компьютера и программного обеспечения (табл. 3).

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

Цвет

Цвет на экране можно описать по-разному (табл. 4), но в основном это лишь различные способы объяснения компьютеру,
сколько нужно взять красного, зеленого
и синего, чтобы получить нужный цвет.

Проценты

Размерность многих элементов в этой книге – проценты. Процентные значения зависят от используемого элемента.

URL

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

Введение
18

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

Тип величины
Описание
Пример

<number>
Целое
1, 2, 3

<length>
Измерение расстояния или размера
1in

<color>
Цвет
red

<percentage>
Пропорция
35%

<URL>
Абсолютный или относительный путь
http://www.mySite.net/bob/
к Internet-файлу
graphics/image1.gif

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

Обозначение
Тип единицы
Описание
Пример

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

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

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

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

Обозначение
Тип единицы
Описание
Пример

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

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

mm
Миллиметры
25mm

cm
Сантиметры
5.1cm

in
Дюймы
1 дюйм = 2,54 см
2.25in

Таблица 4. Цвет

Обозначение
Описание
Пример

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

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

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

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