Оглавление


Предисловие 3
Для кого предназначена эта книга 4
Допущения, принятые в книге 5
Содержание книги 7
Соглашения, использованные в книге 9
Использование кода примеров 9
Как связаться с издательством O\'Reilly 10
Safari Enabled 11
Благодарности 11
Глава 1. Общие примеры 13
1.1. Применение технологии CSS с HTML-кодом 14
1.2. Использование различных селекторов для стилевого оформления 17
1.3. Когда использовать селекторы класса и селекторы ID 32
1.4. Осмысление свойств CSS 36
1.5. Осмысление блочной модели 37
1.6. Осмысление DOCTYPE и его влияние на компоновку страниц
в Web-обозревателе 45
1.7. Связь стилей с Web-страницей 49
1.8. Как применять разные типы таблиц стилей 52
1.9. Вставка комментариев в таблицы CSS 58
1.10. Организация информации в таблице стилей 59
1.11. Организация файлов таблиц стилей 61
1.12. Работа со свойствами с сокращенной формой записи 62
1.13. Настройка альтернативной таблицы стилей 65
1.14. Применение плавающей модели для вывода изображений 66
1.15. Применение абсолютного позиционирования 69
1.16. Использование относительного позиционирования 71
1.17. Применение CSS в Adobe Dreamweaver 73
1.18. Применение CSS Microsoft Expression Web Designer 77
Глава 2. Web-типографика 81
2.1. Задание шрифтов 82
2.2. Задание размеров шрифта 86
2.3. Усиление контроля над размерами шрифтов 88
2.4. Принудительное назначение размера шрифта 94
2.5. Центрирование текста 95
2.6. Задание выравнивания текста по ширине 95
2.7. Удаление свободного пространства между заголовками и абзацами 96
2.8. Задание простой приподнятой буквицы 97
2.9. Формирование центрированной приподнятой буквицы большего размера 99
2.10. Декоративное оформление приподнятой буквицы с помощью изображения 101
2.11. Создание заголовка со стилизованным текстом 104
2.12. Создание заголовка со стилизованным текстом и рамкой 106
2.13. Стилевое оформление заголовка с помощью текста и изображения 108
2.14. Создание врезки в HTML-тексте 110
2.15. Создание врезки с рамкой 112
2.16. Создание врезки с помощью изображений 114
2.17. Задание отступа в первой строке абзаца 117
2.18. Задание отступа для всего абзаца 119
2.19. Создание обратного отступа 122
2.20. Стилевое оформление первой строки абзаца 126
2.21. Стилизация первой строки абзаца с помощью изображения 128
2.22. Создание эффекта выделенного текста 129
2.23. Изменение межстрочных интервалов 130
2.24. Добавление графической обработки HTML-текста 133
2.25. Вставка тени за текстом 134
2.26. Корректировка межбуквенных и межсловных пробелов 136
Глава 3. Изображения 141
3.1. Вывод рамки вокруг изображения 141
3.2. Удаление рамок, устанавливаемых по умолчанию вокруг изображений
в некоторых Web-обозревателях 143
3.3. Установка фонового изображения 145
3.4. Создание полосы фоновых изображений 146
3.5. Размещение фонового изображения на Web-странице 147
3.6. Выбор нескольких фоновых изображений в одном селекторе 151
3.7. Создание закрепленного фонового изображения 153
3.8. Наложение HTML-текста на изображение 156
3.9. Замещение HTML-текста изображением 159
3.10. Замена HTML-текста Flash-текстом 163
3.11. Использование множественных PNG-файлов с прозрачностью 166
3.12. Создание панорамного представления изображения 169
3.13. Комбинирование разных графических форматов 172
3.14. Скругленные углы колонок с фиксированной шириной 178
3.15. Скругленные углы (метод раздвижных дверей) 182
3.16. Скругленные углы (метод горной вершины) 187
3.17. Скругление углов с помощью JavaScript 191
3.18. Вставка тени за изображением 195
3.19. Вставка сглаженной тени за изображением 198
3.20. Создание масштабируемых изображений 202
3.21. Создание выносок 204
3.22. Как помешать людям похищать ваши фотографии 208
3.23. Автоматическая вставка отражений в изображения 210
3.24. Применение изображений-спрайтов 214
Глава 4. Элементы страницы 219
4.1. Удаление полей страницы 219
4.2. Раскрашивание полосы прокрутки 222
4.3. Методы центрирования элементов на Web-странице 225
4.4. Создание рамки страницы 231
4.5. Настройка разделителя 234
4.6. Добавление зоны полноразмерного просмотра изображения 238
Глава 5. Списки 245
5.1. Изменение формата списка 246
5.2. Задание в списке отступов, отображаемых в разных Web-обозревателях 248
5.3. Установка разделителей между элементами списка 249
5.4. Создание пользовательских текстовых маркеров в списках 251
5.5. Создание пользовательских маркеров-изображений в списках 254
5.6. Вставка больших пользовательских маркеров-изображений для списков 256
5.7. Обогащение представления списка с помощью изображения 258
5.8. Создание строчных списков 262
5.9. Создание обратных отступов в списке 264
5.10. Смещение маркера внутрь списка 265
Глава 6. Ссылки и навигация 269
6.1. Удаление подчеркивания ссылок (и применение других приемов
стилевого оформления) 269
6.2. Изменение цвета ссылок 272
6.3. Изменение цвета ссылок в разных секциях страницы 273
6.4. Вывод пиктограммы в конце ссылки 274
6.5. Изменение курсоров 277
6.6. Изменение внешнего вида ссылки при наведении указателя мыши
без применения JavaScript 279
6.7. Создание навигационных текстовых меню и визуальных эффектов
при наведении указателя мыши на его пункты 281
6.8. Создание горизонтальных навигационных меню 286
6.9. Создание навигационного меню с клавишами доступа 291
6.10. Создание переходов с помощью ссылок-цепочек 293
6.11. Создание с помощью изображений визуальных эффектов
наведения указателя мыши на ссылку 297
6.12. Создание раскрывающихся меню 303
6.13. Создание контекстных меню 305
6.14. Создание всплывающих подсказок с помощью атрибута title 308
6.15. Разработка динамического визуального меню 309
6.16. Динамическое применение стилей на Web-странице 313
Глава 7. Формы 319
7.1. Изменение пробельной зоны вокруг формы 320
7.2. Задание стилей для элементов ввода 321
7.3. Применение разных стилей к разным элементам ввода одной формы 324
7.4. Назначение стилей элементам textarea 325
7.5. Задание стилей элементов select и option 327
7.6. Создание поля поиска в стиле Macintosh 329
7.7. Стили кнопок формы 332
7.8. Создание изображения кнопки Submit 336
7.9. Установка кнопки Submit-Once-Only 337
7.10. Создание кнопки Submit в виде HTML-текста 338
7.11. Как заставить текстовую HTML-ссылку действовать как кнопка Submit 340
7.12. Разработка Web-формы без таблиц 341
7.13. Разработка формы из двух колонок без применения таблиц 344
7.14. Выделение цветом полей формы 347
7.15. Включение в форму информации обратной связи 349
7.16. Стилевое оформление клавиш доступа в Web-формах 352
7.17. Группировка одинаковых элементов формы 353
7.18. Ввод данных в форму в виде электронной таблицы 356
7.19. Пример дизайна: регистрационная форма 360
7.20. Пример дизайна: регистрационная форма 366
Глава 8. Таблицы 377
8.1. Задание объема свободного пространства вокруг ячейки 377
8.2. Задание рамок и отступов ячеек 379
8.3. Задание стиля заголовка 381
8.4. Задание стилей в ячейках таблицы 382
8.5. Задание стилей элементов шапки таблицы 384
8.6. Удаление зазоров у изображений, помещенных в ячейки таблицы 387
8.7. Устранение промежутков между ячейками таблицы 389
8.8. Создание чередующихся цветов фона в строках таблицы 390
8.9. Создание эффекта выделения цветом строки таблицы 393
8.10. Пример проекта: элегантный календарь 395
Глава 9. Макеты страниц 407
9.1. Построение одноколоночного макета 408
9.2. Создание двухколоночного макета 410
9.3. Построение двухколоночного макета с колонками фиксированной ширины 417
9.4. Создание "резинового" многоколоночного макета с помощью
плавающей модели 422
9.5. Создание с помощью плавающей модели макета с тремя колонками
фиксированной ширины 425
9.6. Создание с помощью позиционирования "резинового"
многоколоночного макета 428
9.7. Создание с помощью позиционирования многоколоночного макета
с колонками фиксированной ширины 432
9.8. Использование плавающей модели для отображения колонок
в произвольном порядке 435
9.9. Проектирование асимметричного макета 456
Глава 10. Печать 461
10.1. Создание версии страницы для печати 462
10.2. Создание готовой к печати Web-формы 464
10.3. Отображение URI после ссылок 469
10.4. Вставка специальных символов перед ссылками 471
10.5. Пример дизайна: версия страницы для печати, созданная средствами CSS 473
Глава 11. Программистские трюки, искусственные приемы
и выявление неисправностей 483
11.1. Изоляция стилей в Netscape Navigator 4 484
11.2. Отображение некоторых стилей в Internet Explorer 5.x для Windows 487
11.3. Устранение промелька Web-страницы в Internet Explorer 5.x для Windows 492
11.4. Закрепление фоновых изображений в Internet Explorer 6 для Windows 493
11.5. Использование условных комментариев в Internet Explorer для Windows
для передачи стилей 494
11.6. Скрывание стилей от Internet Explorer 5 для Macintosh 497
11.7. Установка интеллектуальной системы управления
программистскими трюками 498
11.8. Диагностика ошибок CSS и проблем Web-обозревателей 500
11.9. Тестирование дизайна сайта на нескольких платформах
с помощью единственного компьютера 501
11.10. Установка на компьютер нескольких версий Internet Explorer для Windows 503
11.11. Проверка Web-сайта с помощью текстового Web-обозревателя 505
Глава 12. Проектирование с помощью CSS 507
12.1. Существенное увеличение текста 507
12.2. Создание неожиданного сочетания 509
12.3. Комбинирование разнородных элементов для создания контраста 512
12.4. Управление взглядом с помощью контраста 514
12.5. Проверка достаточности цветового контраста 517
12.6. Выделение цитаты 519
Приложение 1. Источники 523
Основные обучающие материалы, относящиеся к языку HTML
и технологии CSS 523
Дизайнерские ресурсы 524
Дискуссионные группы 526
Ссылки 527
Средства 528
Приложение 2. Свойства CSS 2.1 и частные дополнения 531
Приложение 3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1 547
Приложение 4. Стилевое оформление элементов форм 551
Флажки (checkboxes) 553
Элемент ввода имени файла (file input) 556
Переключатели (radio buttons) 559
Текстовые поля (text fields) 562
Поля со списком для многовариантного выбора (multiple options) 565
Поля со списком для выбора одного значения (select single item) 568
Кнопка Submit 571
Многострочные текстовые поля (textarea) 574
Предметный указатель 577

X
Оглавление
IX
Оглавление