You are on page 1of 482

Серия GARAGE
Марк Кэмпбел

Строим Web-сайты

ДиЗАйН • HTML • CSS
Перевод с английского языка

PRENTICE
HALL

PTR

«Издательство Триумф»
Москва

WEB DESIGN

Marc Campbell

PR

HALLCE

PTR

Prentice Hall Professional Technical reference
Upper Saddle River, NJ • Boston • Indianapolis • San Francisco
New York • Toronto • Montreal • London • Munich • Paris • Madrid
Capetown • Sydney • Tokyo • Singapore • Mexico City

УДК 004.738.5
ББК 32.973.202
К98

Кэмпбел, Марк.
К98

Строим Web-сайты. Дизайн • HTML • CSS. GARAGE : пер. с англ. яз. /
Марк Кэмпбел ; [пер. с англ. Александр Горлач, Александр Климович]. — М.:
Изд-во ТРИУМФ, [2006]. — 480 с. : ил. — (Серия «Garage»). —

Доп. тит. л. англ. — ISBN 5-89392-134-8.
Агентство CIP РГБ

Если вы - начинающий Web-мастер, занятый построением собственного Webсайта, неважно, с какой целью - для рекламы своего бизнеса, для онлайновой торговли
или просто так, для самовыражения, - то эта книга для вас. С ее помощью вы станете
настоящим профессионалом в области Web-дизайна.
Вашим гидом будет признанный разработчик Web-сайтов и преподаватель Марк
Кэмпбел. Его книга отличается редким достоинством: она не требует от вас нудного
чтения «от корки до корки». Скорее, книга приспособлена для быстрого поиска нужной
темы, получения ответа на вопрос «как сделать это?» и практического применения полученных знаний. И можно смело утверждать: нет таких вопросов Web-дизайна, на которые вы не найдете ответа в этой книге!
Данное издание особенно интересно тем, что оно выпускается в серии GARAGE,
которая пользуете^ большой популярностью у американских читателей. Ведь, как известно, многие передовые технологии современной цивилизации, в том числе и компьютер, создавались именно в гараже.

Посетите наш Интернет-магазин «Три ступеньки »: WWW.3st.ru
E-mail: post@triumph.ru
Authorized translation from the English language edition, entitled WEB DESIGN GARAGE, 1 B l Edition,
ISBN 0131481991, by CAMPBELL, MARC, published by Pearson Education, Inc, publishing as Prentice Hall PTR, Copyright © 2005 Pearson Education Inc.
All rights reserved. No part of this work may be reproduced or transmitted in аду form or by any means - electronic or mechanical, including photocopying, recording or by any information storage retrieval systems - without the written
permission from Pearson Education, Inc. RUSSIAN language edition published by Triumph Publishing, Copyright © 2006.
Авторизованный перевод англоязычного издания, под названием WEB DESIGN GARAGE, 1 s t Edition, ISBN
0131481991, by CAMPBELL, MARC, изданного Pearson Education, Inc, publishing as Prentice Hall PTR, Copyright ©
2005 Pearson Education Inc.
Все права защищены. Никакая часть данной книги не может быть переделана или изменена в какой-либо
форме, электронной или механической, включая фотокопирование, переписи на носители информации без разрешения Pearson Education, Inc. Русскоязычная версия, изданная ООО «ИЗДАТЕЛЬСТВО ТРИУМФ», Copyright © 2006 г

ISBN 5-89392-134-8
ISBN 0-13-148199-1 (США)

1

Обложка, серия, оформление
ООО «Издательство ТРИУМФ», 2006

Оглавление
Введение

11

ЧАСТЬ 1 . Дизайн и удобство использования

13

ГЛАВА 1 . Разработка дизайна, облегчающего навигацию

14

ГЛАВА 2 . Группирование схожих функций

20

'..

ГЛАВА 3 . Разработка рисунков для щелчков

28

ГЛАВА 4 . Достижение сбалансированности

36

ГЛАВА 5. Выбор цветов

43

Выбор цветов текста и фона
Выбор цветов ссылок
Выбор цветов интерфейса
ГЛАВА 6 . Разработка специальных возможностей
Обеспечение доступности изображений
Обеспечение доступности мультимедиа
Управление использованием цвета

43
47
48
51
52
54
55

ГЛАВА 7 . Удобство навигации

57

ГЛАВА 8 . Использование меню переходов

62

ГЛАВА 9 . Управление всплывающими окнами

68

Создание всплывающих окон
Перемещение всплывающего окна на передний план
Добавление ссылки Close
ГЛАВА 1 0 . Создание открывающихся меню

70
73
74
75

Понятие слоев
Размещение открывающихся меню

76
78

ГЛАВА 1 1 . Обеспечение путей отхода

89

ГЛАВА 1 2 . Работа со скриптами и таблицами стилей

92

Внедрение скриптов
Внедрение таблиц стилей
Присоединение скриптов
Присоединение таблиц стилей

92
94
95
96

Дневник: Внедрение или присоединение?

97

ГЛАВА 13. Запуск скриптов при помощи ссылок

98

Дневник: JavaScript-ссылки или onClick-ссылки?

99

6

Строим Web-сайты

ЧАСТЬ 2. Вопросы, касающиеся макетов

100

ГЛАВА 14. Создание макетов с фиксированной шириной
при помощи таблиц

101

Дневник: для создания макета использовать HTML- или CSS-код?

107

ГЛАВА 15. Создание макетов с фиксированной шириной
при помощи таблиц CSS

108

ГЛАВА 16. Центрирование CSS-макетов с фиксированной шириной

113

ГЛАВА 17. Создание текучих макетов при помощи таблиц

116

ГЛАВА 18. Создание текучих макетов при помощи таблиц CSS

122

ГЛАВА 19. Разделение изображений на срезы для макетных таблиц

127

ГЛАВА 20. Создание многоколонных макетов при помощи таблиц

132

ГЛАВА 2 1 . Создание многоколонных макетов при помощи таблиц CSS

136

ГЛАВА 22. Предотвращение разрыва навигационной панели

139

ГЛАВА 23. Раскрашивание ячеек таблицы

146

ГЛАВА 24. Раскрашивание и форматирование CSS-разделов

151

ГЛАВА 25. Управление пространством дизайна в языке HTML

158

ГЛАВА 26. Управление пространством дизайна при помощи таблиц CSS

ЧАСТЬ 3. Вопросы, касающиеся изображений

159

.....161

ГЛАВА 27. Выбор правильного типа файла изображения

162

ГЛАВА 28. Оптимизация Web-изображений

164

Оптимизация разрешения
Оптимизация размера изображения
Оптимизация палитр файлов в форматах GIF и PNG
Оптимизации сжатия изображений в формате JPEG

165
167
167
168

ГЛАВА 29. Трансформация изображений
с использованием атрибутов языка HTML

169

ГЛАВА 30. Размещение внутристрочных изображений
при помощи языка HTML

171

ГЛАВА 3 1 . Плавающие внутристрочные изображения
с использованием таблиц CSS

173

ГЛАВА 32. Разработка состояний кнопок

177

ГЛАВА 33. Создание ролловерной графики

180

ГЛАВА 34. Повышение доступности изображений

184

ГЛАВА 35. Создание карт ссылок

.'

186

ГЛАВА 36. Повышение доступности карт ссылок

190

Оглавление
ГЛАВА 37. Использование фоновых изображений в ячейках таблицы

193

ГЛАВА 38. Использование фоновых изображений в CSS-разделах

196

ГЛАВА 39. Использование фоновых изображений на Web-страницах

199

ЧАСТЬ 4. Текст

203

ГЛАВА 40. Правильное использование текстовых элементов

204

Работа с тегами заголовков
Маркировка абзацев
Использование элементов цитат
Отображение адреса

205
207
207
208

ГЛАВА 4 1 . Правильное использование элементов фраз

210

ГЛАВА 42. Добавление каскадных таблиц стилей

213

Написание каскадных таблиц стилей
Написание таблицы стилей
Внедрение таблиц стилей
Импорт таблиц стилей
Использование HTML-атрибута стиля

214
214
220
221
223

ГЛАВА 4 3 . Замена тегов форматирования
каскадными таблицами стилей

225

ГЛАВА 4 4 . Создание специальных стилей форматирования

228

ГЛАВА 4 5 . Изменение внешнего вида текстового элемента

232

Определение контекстно-зависимых селекторов
Определение дочерних селекторов
Определение братских селекторов
Смешивание селекторов разных типов

232
235
237
238

ГЛАВА 4 6 . Определение стилей классов

240

Формирование привилегированного клуба

243

ГЛАВА 4 7 . Управление шрифтом

245

Устранение ошибок, связанных со шрифтами

246

Выбор наилучшей гарнитуры

248

ГЛАВА 4 8 . Управление размером шрифта

249

Использование тега <font>
Использование атрибута font-size
:
Использование констант длины в каскадных таблицах стилей

249
250
252

Дневник: способ изменения размера шрифта
ГЛАВА 4 9 . Управление интервалами
Управление пространством вокруг элементов
Управление пространством внутри элементов

253
,

254
254
256

8

Строим Web-сайты
Управление междустрочными интервалами
Управление зазорами между словами
Управление зазором между буквами

.256
257
258

ГЛАВА 5 0 . Управление выравниванием текста

260

ГЛАВА 5 1 . Управление отступами

263

ГЛАВА 5 2 . Создание списков

269

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

271
273
273
274
277

ГЛАВА 5 3 . Выделение текста с помощью цвета
ГЛАВА 5 4 . Реабилитация горизонтальных линий

280
!

283

Создание знаков конца

286

ГЛАВА 5 5 . Добавление строки даты и метки времени

287

ГЛАВА 5 6 . Разработка таблиц данных

295

Использование большинства тегов группировки
Работа с атрибутами colspan и rowspan
Выбор значений атрибутов cellpadding и cellspacing
Изменение границы
Повышение доступности

299
300
305
308
312

ГЛАВА 5 7 . Использование псевдоэлементов

318

ГЛАВА 5 8 . Определение стилей идентификаторов

323

ЧАСТЬ 5. Ссылки

325

ГЛАВА 5 9 . Применение стилей к гиперссылкам

326

Дневник: в защиту подчеркивания ссылок
ГЛАВА 6 0 . Создание ролловерных гиперссылок

:...331
,

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

332
334
334
336
338
340
340
341

ГЛАВА 6 3 . Выбор подходящего текста для гиперссылки

343

ГЛАВА 6 4 . Создание всплывающих подсказок для гиперссылок

349

ГЛАВА 6 5 . Открытие нового окна браузера

351

Использование именованных анкеров Задание именованных анкеров Привязка к именованным анкерам 9 352 352 353 ГЛАВА 6 7 .. Работа с полями файлов Работа со скрытыми полями Работа с полями изображений Замена кнопки Reset (Сброс) Замена кнопки общего назначения Работа со списками Работа с меню Работа с полями паролей Работа с переключателями Работа с кнопками сброса Работа с кнопками Submit (Передать) Работа с текстовыми областями Работа с текстовыми полями ГЛАВА 6 9 . Вывод предупреждения браузера 433 ГЛАВА 79. Формы 357 ГЛАВА 6 8 . Специальные приемы 409 ГЛАВА 74.Оглавление ГЛАВА 6 6 .. Проверка достоверности входных данных формы 385 Г Л А В А 7 1 . Отображение содержимого. Работа с элементами управления форм Работа с кнопками общего назначения Работа с флажкам и . Применение стилей к текстовым элементам управления Изменение текстового стиля Изменение цвета и границы . Создание ссылок электронной почты 355 ЧАСТЬ 6.. Автоматическая переадресация браузера 419 ГЛАВА 77. выбираемого случайным образом 422 ГЛАВА 78. Навигация с помощью клавиши Tab 393 ГЛАВА 7 2 . Автоматическое обновление страницы 415 ГЛАВА 76. Работа с метками 405 ЧАСТЬ 7. Работа с наборами полей 397 ГЛАВА 7 3 . Встраивание мультимедиа 410 ГЛАВА 75. Отображение всплывающего окна «Вы покидаете сайт» 439 .358 359 360 361 363 364 365 366 366 368 370 371 373 374 375 377 379 379 382 ГЛАВА 7 0 .

458 ГЛАВА 84. Создание HTML-документов 442 Организация Web-сайта ГЛАВА 8 1 . Тестирование сайта . Проверка правильности исходного кода 468 Глоссарий 470 . Базовое обучение Строим Web-сайты 441 ГЛАВА 80. Загрузка сайта на сервер 466 ГЛАВА 86.10 ЧАСТЬ 8. Блокирование частей сайта для поисковых систем 454 ГЛАВА 83. Добавление ключевых слов и описаний страниц 447 452 ГЛАВА 82. Выбор Web-хоста Поиск Web-хоста Предоставляемые возможности 461 461 464 ГЛАВА 85.

найдите то. Когда я прочитал это. пригодится пара слов об организации книги. группирование или технология. вам требуется пять сотен дополнительных рукописных страниц. примеры и фрагменты кода и есть кто-то для объяснения всего этого: добро пожаловать в книгу Web Design Garage. и возвращайтесь к работе. что я пытался сказать!» Но затем я подумал . чтобы сделать темы максимально независимыми. почему так происходит. но и удобство использования . «Правильно!» . или даже искусного лозунга вместо полной книги? Как мог невероятно проницающий комментарий Хьюита повлиять на условия моего соглашения? Мое повышение? Это были сугубо деловые отношения. . Возможно. которые ему нравятся. Поэтому. которые помогут решить определенные проблемы. Это случилось со мной. поскольку я уже потратил все. в зависимости от обсуждаемого предмета. в котором происходит погружение в библиотеку (или книгу. Он ответил так . как это было). то чуть не упал со стула. . вы можете перейти к темам. сохраненных в результате выпуска брошюры или информационного листа. наподобие Каскадных Таблиц Стилей (Cascading Style Sheets). Редактор серии просто дал все.они даже могли бы быть единым». что необходимо. В книге в виде множества примеров демонстрируется.Введение Это случается всегда? Чтобы попытаться объяснить что-то. около двухсот тридцати рисунков и шесть месяцев жизни. что пока Хьюит может извергать все кратко изложенные. сопоставляйте и объединяйте. больше похожи на пожарный гидрант. основываясь на этих темах. не стоящим даже рядом с шестым уровнем. вам нравятся рисунки. чем на проповедника. усилиях и сбережениях. важные тезисы. с вашего позволения не читайте дальше.цитирую: «Кэмпбел выполнил прекрасную работу для демонстрации того. что должна предоставить данная книга. предоставляет подробности в виде утешения. что важен не только дизайн. В ней даже делается попытка объяснить. а затем один лихой человек неожиданно приходит и обобщает все это одним предложением. с которыми вы не знакомы. возникшие с вашим сайтом. Вместо традиционных глав используются темы: восемьдесят шесть. Темы могут быть короткими. привлекательная экономия заключалась в том.вы можете обнаружить. с интеллектом. чтобы вы смогли найти необходимую информацию максимально быстро. например. редактору книг серии Garage Series.Java-программист^ не меньше. гром не грянул. как дизайн и удобство использования неумолимо переплетаются.закричал я. что многое можно пропустить. если быть точным. если вы генератор идей. Наилучший подход заключается в обращении к тем темам. и размышлениями. и построить курс. Иногда материал повторяется. размером со статью. что сделал Эбен Хьюит . около девяноста тысяч слов. может быть. не достигнув уровня четкости мышления Эбена Хьюита. Эта книга спокойно отправилась в печать. Если в любой данной теме есть ссылка на методы дизайна. размером с главу.«Вот. Но если вы похожи на меня. К счастью для меня. Эбен Хьюит. и расширить свой кругозор. и кажется никто не заметил. А теперь и подавно. кусочками. в которых описываются данные методы. когда я отправил эту скромную книгу на одобрение Эбену Хьюиту. Или. смешивайте. Эти темы разделены на восемь общих категорий или частей. Книга Web Design Garage немного похожа на объектно-ориентированное программирование. высоко концептуальный проповедник с интеллектом шестого уровня.кто еще мог бы прочитать это? Кто в моем издательстве мог бы сопоставить резюме из двадцати слов стопке рукописных бумаг и думать о времени. Для наилучших результатов не читайте эту книгу от корки до корки . книга перед вами.

что книга Web Design Garage . парни. как старым. следуя своим собственным путем. Катлида Аддиса (Kathleed Addis). какого черта. если я не прав. я был бы недобросовестным. Не обращайте на это внимание. что вы после прочтения книги Web Design Garage уйдете с чем-то стремящимся к нелинейному опыту. Особая признательность и чувство долга исходит непосредственно от меня тем людям. Вы. как Барни Мариспини (Barney Marispini) и Роб Стритер (Rob Streeter) (технические редакторы данной книги) помогли мне закрыть несколько выбоин в моем собственном образовании. то вы являетесь человеком с очевидным вкусом и с некоторыми априорными знаниями о том. Если вы читаете эти слова и если я прав относительно того. немного. в большинстве тем делается предположение.это нечто вроде вымышленного приключенческого рассказа. не подвластные человеку. Возможно. сильно напоминающим серфинг по Интернету. Что касается меня. вы просто любите технологии и на выходных вам нравится испытывать возможности. Я обязан вам. Если вы уже знаете. я обязан вам по отдельности. вам придется сосредоточенно изучать скудно документированные древние формулы. начните рассмотрение книги Web Design Garage с части 8: Темы основного общения. питанию и выпуску данной книги и ее автора. герой. Ракель Каплан (Raquel Kaplan). кто принимал участие в процессе публикации книги.типов. Идея заключается в том. особенно в случае с Web-дизайном. Робина О'Брайена (Robin O'Brien). поэтому вы в конце концов пройдете по всей книге. Чтобы сделать это. чьих имен я не знаю. вы единственный доморощенный Web-flH3aUHep/Web-pa3pa6oT4HK в вашем месте работы. Множество Web-дизайнеров. то в любом случае можете взглянуть на часть 8: просто. так и новым: Нэйл Салкайнд (Neil Salkind). напоминающих супергероев.просто метафора. Катрина Хилдстен (Katrina Hillsten) и Джэки Коде (Jackie Coder). Есть даже периодически появляющийся злодей: отдел по продажам. Возможно. Возможно. Однако. Дмитрия Коржа (Dmitri Korzh) и всех из издательства Prentice Hall PTR. вы занимаетесь собственным бизнесом и вам необходимо создать Web-сайт для вашего бизнеса. кому понравится эта книга. Стэйси Барон (Stacey Barone). которое спасет королевство. чтобы отнять ваш сайт и использовать его для промывки мозгов ваших посетителей с целью покупки вещей. Когда я писал эту часть. Возможно. Линн Холлер (Lynn Haller). что вполне вероятно. что не знаю совсем ничего. то мне нравится думать. если даже вы знаете одну или две вещи. Однако вы сделаете это. Так или иначе. вы сможете продолжить рассмотрение оставшихся частей книги. являются самоучками. включая меня. то. пытаетесь связать вместе части волшебного заклинания. Находясь вдалеке от них. если бы не отметил Джона Нейдхарта (John Neidhart) из компании Barbs. анонимно защищающих город. но чьи усилия содействовали заботе. например.«выбери свою собственную линию рисования» . с которыми я не имел удовольствия встретиться виртуально или реально. эта книга поможет вам узнать гораздо больше. Какой бы ни была ваша ситуация. вы являетесь артистом и окружение Интернета вас заинтересовало. создание HTML-документов и работы со скриптами. чтобы освежить память. что вы в основном знакомы с необходимыми процедурами. часть 8 прояснит для вас: некоторые вещи. пожалуйста. и вы обнаружите настоящую интересную книгу. что если вы до этого никогда не видели букв HTML. . Возможно. когда ожидаешь его менее всего. одного из тех . начав с части 8. как строить Web-сайт. На самом деле. И. и все они ведут к одному и тому же месту (более или менее). весь этот технический разговор . Надеюсь. Также выражаю благодарность обычным подозреваемым компании Studio В.12 Строим Web-сайты Разные дороги стремятся к объединению. и пытался объяснить основные понятия ремесла самому себе наиболее понятным способом. я притворялся. Джули Нагил (Julie Nahil). Джона Фуллера (John Fuller). а не малопонятным лабиринтом ума автора. который появляется тогда. кроме данного предложения. Мы все имеем эти небольшие пробелы в образовании.

ЧАСТЫ. облегчающего навигацию Группирование схожих функций Разработка рисунков для щелчков Достижение сбалансированности Выбор цветов Разработка для специальных возможностей Оставление «хлебных крошек» Использование меню переходов Управление всплывающими окнами Создание открывающихся меню Обеспечение путей отхода Работа со скриптами и таблицами стилей Дневник: Внедрение или присоединение? Запуск скриптов при помощи ссылок Дневник: JavaScript-ссылки или onClick-ссылки? . Дизайн и удобство использования Разработка дизайна.

дизайн обозначает «место размещения» сайта. Содержимое большинства сайтов организовано в соответствии с определенной иерархией или логической структурой. в каком отделе они находятся. Если страницы сайта используют различные подходы к дизайну. Однако когда страница за страницей применяется некоторый единообразный дизайн. Другими словами. Разработка дизайна. Поднимается ваш уровень. способ использования дизайна может помочь посетителям понять. не ища планы этажей около лифтов. на что приятно посмотреть. Он играет более важную роль: создает ощущение места. Хороший дизайн гармонично объединяет страницы сайта. Это визуальная катастрофа. им кажется. должны быть зрительно связаны. которые находятся под одной крышей. независимо от того. что разработчики сайта разбили представляемую информацию на категории и подкатегории. Такие элементы страниц. получается нечто наподобие высококлассного универсального магазина. например: • Фильмы • Боевик • Комедия • Драма • Мелодрама " • Мистика/Приключения • • • • Ужасы • Научная фантастика Музыка • Популярная • Джаз • Классическая Игры • Персональный компьютер • Приставка О нас . Это ощущение места достигается при помощи единообразного использования элементов дизайна по всему сайту. Вот как это работает. облегчающего навигацию Дизайн в Интернете на самом деле не ограничивается предоставлением посетителям чего-то привлекательного. будет создано ощущение места сродни торговом / центру. Более того. как макет. Он проводит границу вокруг определенного места в Интернете и сообщает: «Здесь все гармонично». насколько эффективным может быть 1 дизайн этих отдельных страниц. что они ходят с этажа на этаж и из отдела в отдел. Каждая сверкающая витрина магазина соревнуется с другими витринами без видимого смысла или цели. Привлекаются более серьезные клиенты. Когда посетители перемещаются по сайту. это означает. цветовая схема и стиль текста.ГЛАВА 1.

gtn*№« Content goes here Content goes here Content goes here Content goes here Content goes here.ГЛАВА 1. на каждом этаже здания может быть расположено несколько отделов. на которых посетители находят нужную информацию. что она проводит посетителей именно туда. Элементы списка самого высокого уровня становятся элементами выбора в навигации.1. осуществляя поиск вместо использования навигации? Имеют ли данные сайты иерархическую структуру? Да. Это этажи в вашем высококлассном универсальном магазине. При разработке такого сайта иерархия выполняет большую часть работы. также понадобятся под-подкатегории или под-под-подкатегории. а подкатегории направляют их к необходимому отделу на этом этаже. почти всегда. Как насчет подкатегорий? Это отделы в вашем универмаге. как показано на рисунке 1. чтобы графическое представление сайта максимально соответствовало организационной структуре. заключается в предельном улучшении данного эффекта. Вам нужно. Content goes here 800x490 : 1007. Навигация доставляет их на необходимый этаж. Ваша задача. Разработка дизайна. Для каждой из подкатегорий также нужна страница на сайте.1. желающие просмотреть категории. Даже содержимое огромных сайтов. Элементы верхнего уровня иерархии сайта представляют категории для навигационной панели (Navigation bar) Преимущество иерархической структуры заключается в том. чтобы сделать страницы . просто и наглядно. Теперь уже известно. Пока большинство посетителей использует поиск для нахождения необходимой информации. облегчающего навигацию 15 Часть задаваемые вопросы Как насчет сайтов. что для каждой из основных категорий необходима страница на сайте. Хитрость заключается в том. Считайте. в зависимости от глубины и детализации иерархии сайта. куда они желают попасть. как дизайнера. 1. как при перемещении по реальному зданию. отважные люди. Это быстро. например. Возможно. что для каждого элемента списка необходима одна страница. Amazon и eBay. могут сделать это. Puc. организовано иерархически. Без проблем. Consent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here.

не правда ли? По крайней мере. как правая является страницей подкатегории .этажом здания . Благодаря поисковым системам. Так. дизайн унифицирован.е. скорее всего. В другом случае дизайн определяет подкатегорию. представленные на рисунке 1. Посетители не потеряются при просмотре сайта. Навигация понятна и легко доступна.Строим Web-сайты 16 для каждого уровня иерархии отличающимися визуально. это может помочь посетителям получить представление о сайте. В одном случае дизайн определяет основную категорию. первой странице сайта и перемещались по категориям и подкатегориям . не имея никакого понятия о том. если сайт углубляется до под-подкатегорий. 1. как они туда попали. посетители могут материализоваться в дальних уголках вашего сайта. Оно является виртуальным. Один и mom же дизайн используется для двух типов страниц: страницы основной категории (слева) и страницы подкатегории (справа). если они появились на.возможно все будет в порядке. посетители не обязаны входить через переднюю дверь. при этом придерживаясь общего единообразного вида и функциональности. Они унифицированы и абсолютно одинаковы.отделом на этом этаже. Если дизайн единообразен. Посмотрите на дизайны страницы.это не реальное место. которыми реальные места не обладают. на каком уровне иерархии находится посетитель Серьезное дело.это общее название для каждого раздела иерархии. Рис. закладкам и обмену ссылками между друзьями по электронной почте. Если посетители вошли через переднюю дверь. Например. подкатегория и подподкатегория). Однако обратите внимание.в то время. Это место обладает свойствами.2. Однако Web-сайт . в иерархии присутствует три уровня (основная категория. Однако если ваш дизайн намекает на определенное положение и общий смысл места. .2. Ну. сложно определить. что левая является страницей верхнего уровня . где они находятся по отношению ко всему остальному. независимо от того. Определение Уровень (Level) . т. В дизайне нет даже намека на положение страниц в иерархии.

Два различных. На этом рисунке дизайн сам усиливает логическую структуру сайта. чтобы иметь возможность обеспечить особый. а второй .для страницы подкатегории (справа). расположенной слева. будут изменяться множество раз в процессе разработки. насколько глубокой будет иерархия. представленным на рисунке 1. вероятно. хотя бы приблизительно. но при этом схожий. Рис.ГЛАВА 1. используя при этом дизайн основной категории для страниц основных категорий. предварительно не набросав его структуру. но при этом схожих. дизайн страницы. В любом случае. облегчающего навигацию 17 Совет Для каждого уровня иерархии сайта создавайте особый. Сравните предыдущие дизайны с дизайном. образца дизайна . Совет Даже не думайте о разработке сайта. но при этом схожий. Придайте всем страницам подкатегорий подобный вид. дизайн для страниц каждого уровня. Не обязательно знать каждую отдельную категорию или подкатегорию. что страница подкатегории является другим видом страницы. расположенная справа.3. где они находятся при навигации по сайту .один для страницы основной категории (слева). однако ее дизайн достаточно отличается. Разработка дизайна.3. и можете быть уверены в успехе. Однако следует знать. помогают посетителям понять. чтобы понять. 1. они. имеет признаки страницы основной категории. Страница подкатегории.

4. представленные на рисунке 1. что с каждым шагом они становятся ближе и ближе к требуемой информации. например. представленный на рисунке 1. к жанру книги. для которых наиболее важны страницы нижнего уровня . и на них используется больше графических элементов. страница верхнего уровня предоставляет товары. . «Книги». скажем. что страницы нижнего уровня уточняют или расширяют информацию. поскольку такие сайты предоставляют общую информацию о компании или организации. можно попробовать дизайн.или видеозаписями. расположенной на страницах верхнего уровня. например. когда иерархия спускается из общих категорий к все более и более конкретной информации. В данном случае при перемещении вглубь сайта страницы становятся менее сложными. Такой тип структуры отлично подходит для корпоративных сайтов. а информация на страницах становится более конкретной Если ваш сайт сосредотачивается на информации. например. 1. а затем к конкретному названию в этом жанре.4. но являются практически независимыми. Все более усложняющийся дизайн наводит посетителей на мысль. The Lord of the Rings (Власте лин колец). представленную на странице верхнего уровня. книжных магазинов и магазинов. торгующих аудио. Страницы. как при перемеще нии из общей категории. Однако эта схема не подходит для сайтов электронной коммерции. С точки зрения посетителя.18 Строим Web-сайты Чтобы придать отличительные особенности дизайну.5. Данная схема отлично подходит.определенные продукты для продажи. Рис. можно пойти несколькими различными путями. Предполагается. при перемещении вглубь сайта становятся более загруженными. фантастике. а страницы нижнего уровня содержат дополнительную информацию. которая на ходится на страницах нижнего уровня. В данном дизайне страницы становятся более загруженными при перемещении вглубь сайта.

как. 1. стройте дизайн по направлению к нижнему уровню. на корпоративном сайте.5. сделайте акцент на страницах верхнего уровня. Если наиболее важны страницы нижнего уровня.ГЛАВА 1. облегчающего навигацию 19 Рис. как. Однако если наиболее важны страницы верхнего уровня. на сайте электронной коммерции. . к которым хотите привлечь максимальное внимание. используйте менее сложный дизайн на страницах нижнего уровня Совет Используйте наилучший дизайн на страницах. Если желаете сфокусировать внимание на странице верхнего уровня. например. Разработка дизайна. например.

в котором схожие элементы помещаются друг возле друга. есть дизайнерский прием. пи меньше. они будут выглядеть. 2. Если сначала у нас была группа случайных. и мозг пытается понять. инициирующие выполнение всех этих разнообразных действий. и мозг свяжет их логически Группирование является простым и интуитивно понятным. набор на рисунке 2.3. Иногда посетитель переходит на совершенно другой сайт. Обратите внимание. глаз выделяет каждую группу как отдельную единицу.Q. Соберите объекты в группы. бессмысленных объектов. Забудьте теперь об электронной почте и скриптах. бессмысленных объектов Рис. Иногда страница загружается в новом окне браузера. три различных назначения. как показано на рисунке 2. и единственный способ ее найти .2. как случайные объекты . Возьмите любой набор случайных. Основным способом взаимодействия посетителей с сайтом являются щелчки на гиперссылках.ни больше. Щелчок часто приводит к загрузке новой страницы. 2. Просто рассмотрим основное назначение гиперссылки. И его можно использовать в Web-дизайне. которое заключается в загрузке новых страниц. Иногда страница загружается в текущем окне браузера.. размышляющие над тестами I.ГЛАВА2. то теперь появились две логические группы: живые и неживые объекты. К счастью.4. В другой раз щелчок запускает скрипт на языке JavaScript или серверное приложение. Оно работает по принципу ассоциаций и необыкновенно эффективно. являющу юся основным элементом интерфейса компьютер-человек. Если их расположить равномерно по всему пространству дизайна. Группирование схоЖих функций Группирование . возьмем простую гиперссылку.1. На самом деле Web-сайт является одним из наилучших мест для применения группирования. Все зависит от того. любят данный тип задач. И ссылки. Возьмем любое количество объектов. например. почему эти отдельные объекты принадлежат дан ной кон-кретной группе. Иногда посетитель пере• ходит на другую страницу сайта. выглядят совершенно одинаково. Рис. по крайней мере. Однако если их сгруппировать.2. как группирование намного . Люди. как запрограммировать ссылку. и вы по-прежнему найдете множество вариаций. как показано на рисунке 2. Почему? Чтобы не заходить далеко. Иногда щелчок на гиперссылке заставляет открыться окно программы для работы с электронной почтой.угадать. как показано на рисунке 2. Только одна из этих ссылок открывает окно программы для работы с электронной почтой. позволяющий ассоциировать объекты логически. но не всегда.1. Однако сами гиперссылки имеют.это дизайнерский прием.

Это обрывает логику вашего дизайна. Что произойдет. Если у вас есть объекты. тогда как щелчок на пятой кнопке открывает окно программы для работы с электронной почтой. где посетители могут проследить за выполнением своих заказов? И хотя все четыре кнопки загружают новые страницы. Отвечайте быстро! Какие из приведенных гиперссылок заставляют открыться окно почтовой программы ? Нельзя узнать это иначе. 2. открывает окно почтовой программы Можно использовать возможности группирования для оптимизации интерфейса вашего Web-сайта.4. что ссылка. Лучше отделить кнопку Contact Us (Свяжитесь с нами) от остальных кнопок и перенести ее в какое-либо другое место интерфейса. сможете догадаться. Щелчок на первых четырех кнопках приводит к загрузке новых страниц. 2. расположенная справа. что кнопка Contact Us (Свяжитесь с нами) имеет другое назначение. вы. как показано на рисунке 2. поскольку посетители ожидают.7.3. Не Edit View Favorites lools Рис. хотя все гиперссылки выглядят одинаково и используют один и тот же способ взаимодействия . если первые три кнопки связаны со страницами на текущем сайте. Примените прием группирования к этому бессистемному набору объектов. На навигационной панели остаются четыре кнопки. как показано на рисунке 2.ГЛАВА 2. не связанное с загрузкой страницы. которые выглядят и действуют одинаково. возможно. Группирование схожих функций 21 упростило выбор ссылки для открытия окна для работы с электронной почтой. возможно.одиночный щелчок мышью. однако сами кнопки сгруппированы не самым эффективным способом. группирование необходимо для их различения. что после щелчка на кнопке Contact Us (Свяжитесь с нами) загрузится страница. кроме как щелкнуть на них. независимо от их назначения » № »* Which M e ' Favorites loots Help ar Which link? Which Me? Which Imk ? Puc. а четвертая кнопка открывает новое окно браузера и переходит на другой сайт.5. поскольку гиперссылки всегда выглядят одинаково. Взгляните на навигационную панель. Это усилит мысль. показанную на рисунке 2. Еще лучше изменить целиком внешний вид кнопки Contact Us (Свяжитесь с нами). Названия на кнопках могут быть ясными и простыми для понимания. пожелаете отделить четвертую кнопку от трех остальных просто . но выполняют различные функции.6. вы.

нет. на которой юный Джон Керри (John Kerry) стоит на несколько рядов ниже печально известного либерала Джэйн Фонда (Jane Fonda) на митинге в защиту мира в период войны во Вьетнаме: На фотографии мистер Керри и госпожа Фонда не разговаривают.Строим Web-сайты 22 потому. Однако щелчок на кнопке Contact Us (Свяжитесь с нами) открывает окно почтовой программы. Так зачем же публиковать фотографию? Все просто . как показано на рисунке 2. республиканцы надеялись опорочить его образ. Content ooes here. поскольку посетители предположат. 2.группирование. Это фундаментальный психологический принцип. Puc. Из-за группирования посетители предполагают. Content goes here. Content goes here.8.5. хотя на самом деле это не так. Ассоциация. Они не вступают в сговор против правительства. Показав Джона Керри рядом с Джэйн Фонда. что все пять кнопок имеют одно назначение. Content goes here. Но где поместить четвертую кнопку? Нежелательно группировать ее с кнопкой Contact Us (Свяжитесь с нами). а щелчок на других кнопках загружает новые страницы Часто задаваемые вопросы Группирование — это просто дизайнерский прием? Безусловно. Content goes here. content goes riere.имеют сходное назначение. . не планируют встречи на Кубе и не делают ничего. что она функционирует немного по-другому. В наших мозгах зашита логика поиска смысла в группах. что взбесило бы консерваторов. что эти кнопки . Content goes berc Content ooes here. Content goes here. В начале президентской кампании 2004 года Республиканская партия издала фотографию.

х 480 [ 100% * Рис.7. что кнопка Contact Us (Свяжитесь с нами) имеет другое назначение. Content goes here. 2.pnt. Content goes here. нежели остальные кнопки shoelaceuuarehous Header Cont intent goes here. Content goes here. Content ooes liere Content goes here. 2. Cont Content goes here.>i VWr- goes here.ГЛАВА 2. что кнопка выполняет другой тип действий . Content Рис. Content goes here. Отделите кнопку Contact Us (Свяжитесь с нами). Content goes here. При изменении внешнего вида кнопки Contact Us (Свяжитесь с нами) усиливается мыыь. Группирование схожих функций 23 3 mains. Content goes here.6. Content goes here. Content QOeS a Content goes here. и вашим посетителям станет понятно. oes here.

Content goes here. что удобство в использовании . В данном интерфейсе ничто не сгруппировано в соответствии с назначением. Помните. 2. Метод группирования становится еще более важным на таких страницах. Content goes iiere ontent goes here.это основное правило игры в Интернете. Content goes here. вы дадите посетителям подсказку о ее назначении. тем меньше вероятность. Попробуйте. Content goes Here.8. Content oes here.24 Строим Web-сайты Совет Иногда одного группирования бывает недостаточно. куда добавить новые кнопки или ссылки. He добавляйте кнопки в одну группу. Content goes here.9. что им делать. Дизайн делает использование корзины мучительным.11. . shoelacewarehoi Content goes here. Сам дизайн исключает излишнюю мыслительную работу. 100% Puc. поэтому посетители вынуждены читать название каждой кнопки. чтобы понять. Если ваш интерфейс все еще выглядит неуклюже после разделения элементов управления на функциональные группы. Она упрощает жизнь для вас как дизайнера. Чем больше вы заставляете их останавливаться и думать о том. Более того. Хорошее группирование упрощает жизнь не только для ваших посетителей. как показано на рисунке 2. попробуйте использовать различные дизайны для различных типов кнопок или ссылок. как корзины электронных магазинов со множеством элементов управления со ссылками. По мере роста сайта вы всегда будете точно знать. что они сделают покупку. В этом случае? ваш сайт в конечном итоге не будет выглядеть похожим на монстра Франкенштейна.10. что они делают. если они не выполняют схожие функции. поработать с интерфейсом корзины. которая обычно ссылается на новую страницу. преобразовав кнопку в простую гиперссылкл. Content ?goes here. который представлен на рисунке 2. Ш eoo x *so . Кнопка Tracking (Отслеживание) ссылается на страницу на другом Web-сайте Наилучшим выбором будет выделение места для новой группы в вашем интерфейсе. как показано на рисунке 2.

Content goes here.ГЛАВА 2. куда добавить новые кнопки или ссылки . Content goes here. Благодаря группированию. Content goes here. Content goes here. Группирование схожих функций 25 Content goes here. Content goes here. Content goes here. Content goes here. Content goes here Content goes here. I set quote Рис. Content goes here.10. Content goes here. 2. Content goes here. вы всегда точно знаете. Вместо этого создавайте отдельные группы для отдельных функций Тгэск your package j Shop for shoes I Compare Content goes here. Content goes here. Content goes here. 2.9. contact us Ш io ioo%V Рис. Content goes here. Content goes here.

А еще лучше доработать дизайн кнопок.11.12. 2. продажи Небольшое группирование улучшает ^тот интерфейс.12. как показано на рисунке 2. Що о о • Рис. Корзина стала более понятной после организации кнопок в соответствии с их назначением . чтобы усилить мысль об их различных назначениях. как показано на рисунке 2.13. Организация кнопок в соответствии с их назначением делает работу с корзиной проще и более интуитивно понятной. поэтому они не захотят. ее использовать вообще. Прощайте. Посетителям тяжело исполгзовать эту корзину.26 Строим Web-сайты 0 0 0 contact us gat quote г*ч*ли service 800x480 ] 100% - Рис. 2.

« п »»« Total $3S1. Еще лучше использовать различный дизайн для различных типов кнопок .27 ГЛАВА 2. 480 1100% Puc. 2. Группирование схожих функций Track your package Your shopping cart Паш • Ш Маг.« • "-« • «.м*«СоЫ shoelace set ф Value pack ^ P «Molt titanium shoelace м м • *».IO •.13.

наподобие следующего: <а href="index.1. Разработка рисунков для щелчков В языке HTML чрезвычайно просто превратить изображения в гииерссылки.htm"ximg src="/images/logo.gif" b o r d e r = " 0 " x / a > . которые вы посещали в Интернете.gif"></a> Обратите внимание. сколько изображений со ссылкой. Рамка помогает отличить на странице изображения со ссылкой от изображений без ссылки. браузер нарисует рамку вокруг него. Цвет рамки такой же. сообщая посетителям. когда ваше изображение ссылается на полноразмерную версию графического файла. После превращения изображения в гиперссылку. использующих встроенную рамку. как в следующем примере: <а href ="index. что вы желаете предоставить своим посетителям визуальную подсказку.htm"ximg src = "/images/logo. что браузер рисует прямоугольную рамку вокруг изображения гиперссылки. что изображение является ссылкой. вы видели? Не очень много. 3. как рамка выделяет изображение с гиперссылкой из других изображений Совет Имеет смысл использовать рамку гиперссылки тогда. Но на всех сайтах.1. Рамка является неуклюжей и безобразной и стремится повлиять на поток зрительной информации страницы. Просто вставьте тег изображения между открывающим и закрывающим тегом анкера. как и цвет текстовых гиперссылок. Ваш старый добрый Web-браузер всегда думает наперед и справедливо предполагает. что данное изображение имеет ссылку.ГЛАВА 3. как показано на рисунке 3. Обратите внимание. Вот почем)' большинство Web-дизайнеров предпочитает отключать рамку. Не Е* View Favotrtes Toots tjeb i Рис.

Если подумать несколько секунд. является приглашением покинуть ваш сайт. догадаетесь.2. но при этом создает другую.без ссылок. Чем большее значение используется. Размещение изображений со ссылками в правильном контексте на странице значительно способствует их восприятию как элементов со ссылками. не прибегая при этом к помощи безобразной рамки. посетители не имеют никакого понятия о том. вы. Хитрость здесь заключается в следующем: необходимо сделать так. а два . Разработка рисунков для щелчков 29 Присваивание атрибуту b o r d e r значения 0 решает одну проблему. которая наводит на мысль о ссылках. а не только 0. какое изображение содержит ссылку. Все. однако ваши посетители не будут такими же терпеливыми.без ссылок. Из пяти представленных изображений три изображения со ссылками.ГЛАВА 3. представленный на рисунке 3. .2. тем толще становится рамка. Рассмотрим макет. что заставляет их останавливаться и думать. возможно. Ваши посетители не простят вам этого. Чтобы поддерживать их счастливое погружение в ваш сайт. чтобы изображения со ссылками выглядели как ссылки. как продемонстрировано на рисунке 3. какие изображения со ссылками. однако без рамки. как вы. попробуйте использовать более разумный макет. Отделив изображения со ссылками от изображений без ссылок. показанный на рисунке 3. Можно отключить встроенную рамку гиперссылки.4. как остальные изображения Совет Атрибуту border можно присвоить любое значение. привлекающей внимание. 3. В этом отношении отлично подойдут две методики: контекст и намеки. а какие .3. однако в этом случае изображение со ссылкой будет выглядеть так же. Рис. пока не-переместят указатель мыши над всеми изображениями. вы создаете на странице интерфейс миниатюрной панели управления. На изображении с гиперссышкой все еще можно щелкать.

4. Изображения со ссылками выделяются в данном контексте . 3. Над этим макетом необходимо немного поработать. гораздо лучше. О.3.30 Строим Web-сайты Рис. 3. Три изображения со ссылками не просто отличить от двух изображений без ссылок Рис.

может быть.5. Разработка рисунков для щелчков 31 Совет Задать значение атрибута border можно и для изображения без ссылки. . а явная форма кнопки способствует щелчкам. 3. что произойдет после замены уменьшенных изображений на кнопки. Встроенная в браузер рамка гиперссылки. какие изображения на странице имеют ссылки. которые подсказывают или намекают на назначение элемента. и не очень приятна с эстетической точки зрения.вы ассоциативно связываете действие по нажатию с вашим изображением. Обратите внимание. Намеки . Рис.ГЛАВА 3. используемых в Интернете. Разработка изображений со ссылками. Оно так распространено. на которые нажимают в реальном мире. как показано на рисунке 3. похожих на кнопки. используя цвет текста на странице по умолчанию. что данное изображение содержит ссылку. что многие дизайнеры равнозначно используют термины кнопка и изображение со ссылкой. как быстро исчезли все недавние сомнения относительно того. Одним из наиболее распространенных намеков. однако создает прекрасный намек. особенно когда дизайн перегружен изображениями. . Программа Netscape рисует рамку. является моделирование кнопок. Посмотрим.это верный способ привлечения щелчков . Программа Internet Explorer рисует рамку. Дизайн кнопок помогает поместить их отдельно от изображений без ссылок. используя черный цвет. поскольку она визуально подсказывает посетителям. изображение привлекает щелчки мышью. Для подобных ситуаций пригодятся намеки. что изображения со ссылками будут выглядеть как кнопки . Следовательно. Сделав так.5.объекты. Иногда правильного контекста бывает недостаточно.это визуальные подсказки в самих элементах дизайна.

что использование значков или символов в качестве изображений со ссылками является еще одним эффективным намеком. Хотя кнопки и являются мощным инструментом. Puc. дизайн и соседство с другими элементами дизайна затрудняют поиск этих кнопок На рисунке 3.6. Recent studies have shown trial. Однако их цвет. что значки обладают некоторыми характерными особенностями кнопок. однако. В данном дизайне значки стрелок более непосредственны и интуитивно понятны. Вы можете заметить. the answer to this age-olc question isn't as straightforward as you might think. Они выглядят трехмерно. Посетители предполагают. Square pegs vs.6. не считайте это само собой разумеющимся. чем кнопки с надписями Previous (Предыдущий) и Next (Следующий). если посетители не смогут их найти. чтобы они были заметны. Желательно. round holes: the controversy continues Do square pegs fit into round holes? As ft turns out.32 Строим Web-сайты Определение Намек ~ это визуальная подсказка. как показано на рисунке 3. Всегда старайтесь размещать кнопки так. 3. depending on the size of the holes relative to the size of the pegs. . there's a very good chance that the pegs will fit. что помогает им выделиться на странице.7. чтобы ваши посетители ощущали.7 также показано. Кнопки не сильно вам помогут. что ваш интерфейс находится под их управлением. что переход по газетным материалам осуществляется с использованием кнопок со стрелками. указывающая на назначение элемента дизайна. как показано на рисунке 3.

Recent studies have shown that. Символы в стиле DVD или CD для функций. Значок земного шара может обозначать функцию выхода в Интернет. Эффективность значков на вашем сайте зависит от того. моделирование кнопок Значки и символы работают лучше всего. Аккуратно располагайте кнопки. иначе ваши посетители будут тщетно щелкать на них. представленные на рисунке 3. но хорошее практическое правило заключается в следующем: если существует какое-либо сомнение насчет значения определенного значка. Однако остальные значки. Fast Forward (Перемотка вперед). удивляясь. но в другом случае может и не обозначать. когда их значение очевидно и общепринято. Puc. the answer to this age-old Question isn't as straightforward as you might think.функцию E d i t (Правка). даже если вы используете мощный намек. а на других сайтах . что кнопки без ссылок не похожи на кнопки.ГЛАВА 3. Разработка рисунков для щелчков 33 Совет Убедитесь.8. eometry Nr-WS | PROOFS I EQUATIONS | ABOUT С Square pegs vs.7. не используйте его. 3. достаточно понятны. Это касается и использования значка корзины для функции Delete (Удалить) или значка с изображением листочка бумаги с отогнутым углом для функции New Document (Новый документ). например. например. there's a very good chance that the pegs will frt. round holes: the controversy continues Do square pegs fit Into round holes? As it turns out. depending on the size of the holes relative to the size of the pegs. как вы их используете. Stop (Остановить) и остальные. Play (Проиграть). почему ничего не происходит. 2-191 . Значок карандаша на некоторых сайтах может обозначать функцию C r e a t e (Создать). могут иметь более вольную интерпретацию. в основном. Контекст существенно меняет дело.

как Windows. не всегда может быть перенесено в другую. Этот подход используется в операционной системе Microsoft Windows и работает достаточно хорошо. подумайте дважды перед тем. возможно.на всякий случай. и совсем другого в информационной среде. расположенных на Web-сайте. То. Очевидны ли значения этих значков. как использовать их на вашем сайте в качестве изображений со ссылками Одним из способов решения проблемы двусмысленности является включение текста в изображение значка. как Интернет. Они не думают. В операционной системе Windows все имеет значок для щелчка. однако если ваши значки работают только вместе с сопровождающими надписями. расположенных на их рабочем столе. когда вы смотрите на них вне контекста ? Если нет. Если желаете. одного. где изображения часто используются только для информационных целей. такой. что щелкать можно и на значках. . однако у каждого значка есть название . когда речь идет о простоте использования.это текст на кнопке. 3. Определение Метка .9. можете поэкспериментировать с таким подходом на вашем Web-сайте.Строим Web-сайты 34 !«•«•>• W Рмс. Пользователи ожидают от изображений в рабочей среде. поскольку так работает операционная система Windows.5. что пользуется успехом в одной среде. что можно щелкать на значках. Люди полагают. лучше не использовать только кнопки. как показано на рисунке 3.

9.ГЛАВА 3. С другой стороны. поэтому нет необходимости демонстрировать. В Интернете лучше использовать кнопки. особенно в том случае. Одним из способов решения проблемы двусмысленности является включение текстовой надписи в изображение значка. что посетители знают это из своего собственного опыта. Рис. Можно предположить. добавление ролловерного эффекта или чего-нибудь в этом роде не повредит и. однако данный метод лучше подходит для среды операционной системы. чем значки . Логотип обычно связан с первой страницей сайта. 3. когда логотип располагается на навигационной панели или где-либо в основном интерфейсе сайта. Разработка рисунков для щелчков 35 Совет Распространенной практикой является создание корпоративных логотипов со ссылкой. что логотип имеет ссылку. укрепит мысль о возможности щелчков. безусловно.

ГЛАВА4.это путь дзэна. Поскольку столбец слева гораздо короче. Взгляните на несбалансированные столбцы. как показано на рисунке 4. Web-страница обретает внутреннее спокойствие и гармонию. что помогает посетителям находить желаемую информацию. 4. как показано на рисунке 4. Использование Web-страницы не должно напоминать игру в прятки. все элементы макета будут выглядеть гармонично.1. Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here. Рис. что продемонстрировано на рисунке 4. Сбалансированный макет более удобен в использовании. 2 rtranscendental procrastination» Our promise: Action through inaction. что продолжение содержимого страницы находится вне экрана. кажется. и это успокаивает посетителей. сам макет подсказывает. Text goes here Text goes here Text goes here Text goes here . ДостиЖение сбалансированности Сбалансированность . Однако если добиться сбалансированности. показанные на рисунке 4. Сбалансированность также является важной дизайнерской характеристикой в Интернете.1. чем несбалансированный макет. Он кажется более организованным. чем столбец справа.4. Text goes heie Textgoesnere Texlgoesnere Texlgoesnere Textgoeshere Text goes here Text goes here Text goes here. как показано на рисунке 4. Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here. Если макет не сбалансирован. . посетители могут не подумать пролистать страницу. Если столбцы сбалансированы. Они кажутся подходящими друг другу. чтобы посетители чувствовали себя комфортно.2.3. расположенные внизу страницы. чтобы увидеть кнопки. что с ним что-то не в порядке. Он визуально отталкивает.5. Этот макет не кажется слишком хорошо сбалансированным Сбалансированность дизайна предназначена не только для того.

4. Этот несбалансированный макет не способствует тому.2. Text goes here. Text goes nere. Text goes Лвге Text goes here. Text goes nere. Text goes here. Text goes here. Tex'. Texi goes nere.3. Text goes пеге. Text goes here Text goes nere. Text goes here Text goes here Text goes here Text goes here. Text goes here Text goes here Рис. Texi goes here Text goesnere Text goes here. Text goes here. goes nere. Tex. 4. Texi goes nere. Text goes here Text goes here Text goes here Texi goesnere. Text goes nere Text goes here Text goes nere. Text goes here. Достижение сбалансированности transcendental procrastination Our promise: Action through inaction Text goes here. Text goes • I S00 x TOO j 100% •» Рис. Text goes here Text goes here Text goes here. Text goes here. Text goes here Text goes here. Text goes here. Texi goes here. Text goes here. Text goes here. Text goes here Text goes here. goes here Text goes here. Text goes Text goes here Text goes here Text goes nere. Text goes nere Text goes here. Text goes nere. Text goes here. Text goes here. Text goes here. Text goes here. Text goes Text goes here Text goes here goes here. Text here Text goes nere. чтобы посетители пролистали страницу . Text goes here Text goes Text goes nere. Texi goes nere. Ощущения от сбалансированного дизайна приятнее rtranscendentaiprocrastination«cai«)i«rED How it works: Nothing is everything. Text goes here. Text goes here goes here Texi goes nere Text here. Text goes here Text goes here Text goes here. goes here. Text goes here.37 ГЛАВА 4. goes here. Text goes here. Text goes here. Text goes nere Text here Text goes nere Text goes Text goes here Text goes here. Texi goes here Tex! goes here Text goes nere. Text goes here Text goes nere. Text goes Text goes here. Text goes here. Text goes here. Text nere. Text goes here. i Text goes here Text goes here Text Text goes here « l ~ s here.

goes here. Tex. Text goes here Text goes nere Text goes here. Text goe* here. Если они не пролистают страницу. Tex< Text goes here. Text goes here. here. что страница не заканчивается внизу окна браузера . text goes Tex. Text goes here. Text goesh Text goes here. Text go«« h e m Text goes here. Text goes here Text goes here. Text Text goes nere Texl goes Text Texl goes here. Text goes here goes nere. Text goes here Text goeshere. Text goes here Text goes here Texl goes here Text goes here. Te*t goes here Text Text goes here Text goes here. Text goes here.Строим Web-сайты 38 Text goes here. Text goes here Texl goes here. Text goes here here.here. Text goes here Text here. rexl Text goes here Text goes here goes nere Тем goes here Text here Text goes rtere Text goes Text ooes Texi goes here Text goes here. Text goes Text goes here Text goes here Text goes here Puc. Text goes here Text goes here. Text goes here.4. Texi Text goes nere Text goes here Text goes hare. Text goes g nere T goes t w e goes here. Text goes here Text goes here Text goes here Text goes goes here Text goes here Text here.Text goes nere.goes here. Text goes here. Text goes here. Texl goes here T e x l goeshere. 4. Text goes nere Text goes Tent goes nefe Text goes here Text goes here Texl ooes nete Text goes here Text goes nere. Text aoes hero Text goes Text goes here Text goes here Texi goes here. Text aoes here. Text g o e s t a e . тега Texl goes here Text goes here Text goes here Text goes goes here Tex! Text goes extgoes here here Text goes here Texl goes Tex. Text goes here. Text g o e * here. Text goes here. Text Text goes Text goes hem. Text goes hem. расположенные внизу страницы transcendental procrastination How it works: Nothing is everything.goes here her*! Text goes goe.5. Text goes goes here/Text Fere Texl goes goe* here Text here Text goes here here. Texi goes nere. то не увидят «примочки». Text goes here. Text goes goes here Text here Text goes goes here Text Text goes here Text дом here Text goes Text goes here Text goes hem Text ape* e. Text goeshere. Puc. Сбалансированные столбцы помогают укрепить мысль. 4. Text goes here Text ooes here Tex' g o e s l w e . Text goes Texl goes here Text goes here Text goes nore. Text goes nere Text goes here Text goes here Text here Texl goes nere Text goes nere Text goes Text goes here Text goes i w e Texl goes here Text aoes nere. Твой goes here.

позволяя посетителям сконцентрироваться на содержимом страницы. чем другая. находящееся вне экрана. Затем разместите соответствующие элементы содержимого обратно на своих местах. только пролистав страницу. где вы полагаетесь на свой дизайнерский инстинкт. пока не добьетесь сбалансированного вида. которые вы видели в предыдущих примерах. . что работает. 4.это использовать почти такие же пропорции для всех элементов страницы. Если одна часть дизайна кажется тяжелее.это информация.ГЛАВА 4. Такой подход является хорошим дизайнерским выбором. а что нет. « » т*ч • ' « * - Рис. как показано на рисунке 4. Визуально это совершенно не привлекает внимание. Более абстрактный взгляд на дизайн помогает сфокусироваться на сбалансированности макета. чтобы вид сайта и впечатление от него были сдержанными. Вместо этого дизайн отходит на задний план. Один хороший прием заключается в схематическом изображении дизайна с использованием сплошных фигур. Процесс поиска сбалансированности является немного субъективным.6.6. серьезными и информативными. . которую посетители могут увидеть. самый простой способ сбалансировать дизайн . Это можно назвать классическим подходом. просто меняйте фигуры местами. Достижение сбалансированности 39 Определение Содержимое. а не на содержимом Возможно. а не на самих элементах дизайна. чтобы определить. Работа с макетом в абстрактной форме помогает сконцентрироваться на сбалансированности. если вы желаете.

Классический подход не подойдет. что весит больше в реальном мире. Визуальный вес имеет весьма отдаленное отношение к действительному весу объектов. Рис. чтобы дизайн был захватывающим. Квадрат кажется более тяжелым. 4.9). даже когда они имеют одинаковую площадь. но выглядящий массивно квадрат кажется тяжелее .4. который делает балансирование более сложным и субъективным процессом. даже если последние представляют собой что-то. Как показано на рисунке 4.8. В таком случае необходим более динамичный макет. И даже вымывание или уменьшение насыщенности большего элемента дизайна не повлияет на его визуальный вес (Рис. что является гораздо более тяжелым в реальном мире Рис. однако он включает в себя размер и форму рассматриваемого элемента. чем меньшие элементы. большие элементы дизайна обычно бывают тяжелее. чем прямоугольник. если они существуют в реальном мире. как показано на рисунке 4. Квадрат и прямоугольник могут иметь одинаковую площадь.8.40 Строим Web-сайты Определение Визуальный вес определяет. Вам окажет содействие принятие во внимание визуального веса элементов дизайна. насколько тяжелым кажется элемент дизайна. если вы желаете. хотя на меньшем рисунке изображено нечто.7.7. Визуальный вес тяжело измерить. Больший рисунок визуально кажется более тяжелым. 4. чем меньший рисунок.

ГЛАВА 4. Достижение сбалансированности 41 Рис. чтобы различные веса были сбалансированы. изменив положение элементов в дизайне. 4. как показано на рисунке 4.10. что дает нам более сбалансированный.11. в то же время сохраняя смысл движения и ощущение. как показано на рисунке 4. 4. но он не потеряет от этого свой визуальный вес После того как определен визуальный вес используемых элементов дизайна. Однако. Можно уменьшить насыщенность большего элемента дизайна. Более легкие и более тяжелые элементы кажутся расположенными в беспорядке. исходя из их положения на странице.10. что эти элементы расположены в беспорядке . transcendental procrastination Рис. гармоничный эффект. мы распределили их веса лучше. чтобы получить нечто вроде гармонии или равновесия. которое вы получаете при использовании элементов с различными визуальными весами.9. Мы хотим. Кажется. их можно расположить таким образом.

не жертвуя при этом ощущением динамики . FlepepacnpedejieHue их весов создает большее ощущение равновесия.Строим Web-сайты 42 [•transcendental procrastination «о»»»»» X60O i 100% * Рис.11. 4.

не щурясь и не замедляя скорость. который должен отходить на задний план. используйте цвет из абсолютно другого семейства цветов. Если хотите. как показано на рисунке 5. Затем для одного или двух элементов дизайна. заставляет глаза посетителей работать усерднее. похожий на рисунке 5. забавные и энергичные или спокойные и прохладные. можете сделать с текстом на вашем сайте. Выбор цветов Выбор эффективной цветовой схемы для Web-сайта является одним из самых больших фокусов в арсенале дизайнера. цвета ссылок и цвета интерфейса. чтобы блуждающие взгляды могли просматривать. как дизайнер. Выбор цветоВ текста и фона ЛЮДИ не читают текст на Web-странице. чем обычно. исполняет две роли. Совет Попробуйте следующее: используйте на вашем сайте цвета. вашим посетителям будет тяжелее просматривать текст. Лучшее. Идеальный контраст между текстом и фоном понятен с точки зрения выделения текста.1. что в свою очередь приведет к тому.включая пустое пространство . Каждый элемент дизайна на странице . не менее важен и тип контраста. что вы. что все цвета работают сообща для укрепления настроения и назначения сайта.имеет цвет. Разительный или яркий контраст. например. что приводит к головным болям и зрительному напряжению. Нам требуется мягкое выделение текста на фоне. Работу по выбору цвета можно разбить на три общие области: цвета текста и фона. Во-первых. В этом отношении контраст является наиважнейшим инструментом. Вместо этого они любят просматривать страницу и выбирать частицы и кусочки информации. и мы хотим убедиться. когда посетители не нуждаются в нем.выполнить его простым для просмотра.ГЛАВА 5. Чтение чрезвычайно затягивает процесс. В то же время. большая часть которых принадлежит одному и тому же семейству: теплые и заманчивые. А во-вторых. У них нет на это времени. что им будет тяжелее найти необходимую информацию. и спокоен в том смысле. для ссылок или символов предупреждения (элементы дизайна. . но вредные привычки просматривать все бегло остаются фактом. которая им интересна. что он не подавляет дизайн. и читать текст слово за словом. Если контраст недостаточен. можете винить в этом закат западной цивилизации или слишком большое количество телевизионных программ и видеоигр. .2. он привлекает слишком большое внимание к тексту. которые действительно должны выделяться).

Ваши посетители просматривают текст бегло. 5. как он привлекает к себе слишком много внимания . но заметьте. Разительный контраст может быть легким для чтения.2. а текст с низким контрастом тяжело просматривать бегло Рис.7.Строим Web-сайты 44 The truth you шнч! at the price yoinan afford | # NEWS • ARCHIVE | • ACCOUNT Рис. 5.

4.3. для выделения или акцентирования. . Фон . ответив на вопрос: если вы кричите все время. Story goes here. Подумайте об этом.3. Story goes here. Оставьте их для подсветок элементов. Stay goes here. насколько возможно. Такое сочетание создает хороший контраст и не трудно для глаз. Story goes here. как вы собираетесь увеличить громкость.и пусть содержимое страницы станет звездой представления. Story goes Sere. тяжелее для глаз. Storygoes here. Stoiy goes here. The truth you need at the price you can afford | • NEWS I • ACCOUNT WYOMING MAN FINDS NEEDLE IN HAYSTACK Story goes here. Если ваш сайт насыщен текстом.ГЛАВА 5. Story goes here. Story got* here. направленное на основное содержимое ваших страниц.это не место для ярких или необычных оттенков. Story goes here. Story goes here. Slon'RO^bere. когда это понадобится? Вы не ошибетесь. 5. чтобы он отвлек внимание. Story goes here. Story gees here. Discuss Debunk Boofemarit Related stories Story goes here. Story goes Puc. как правило. Story goes веге. . Story goes here. Story goes here. Выбор цветов 45 Совет Для повышения контраста на странице вы можете подвергнуться соблазну использования жирного шрифта для всего текста. . Story goes here. Story goes hete^ Story ROBS here. Не стоит этого делать. -4lory goes here. Story goes here. Существует достаточно веских причин. Story goe* here. Story goes here. Story giiea l:«e. Бледные оттенки или оттенки с уменьшенной насыщенностью могут быть настолько же эффективны. Story goes here. Можно поэкспериментировать со светлым текстом на темном фоне. Фон должен оставаться «фоновым» настолько. как и белый цвет фона. как показано на рисунке 5. Story goes here. Story goes here. ничто не поколеблет черный текст на белом фоне Однако не стоит замыкаться на этой схеме. позаботьтесь о выборе цвета фона страниц. Когда дело доходит до контраста. Stoty goes here. Story goes here. Story goes here Stoty goes here. подобная схема может быть не лучшим выбором. Story goes here.5. чтобы испытать различные комбинации цветов. которые используются специально для привлечения внимания. когда используется в небольших количествах. Вы же не хотите. Жирный шрифт подходит лучше. Если вы можете использовать данную цветовую схему в вашем дизайне. как показано на рисунке 5. как показано на рисунке 5. Story goes Here. Stoiy goes here. Story goes here. Даже если на вашем сайте мало текста. то это вообще будет наилучшим решением. Story h Stor o here. Story goes here. Story goes here. если используете черный текст на белом фоне. Story goes here. Scry goes here. Story goes here. Stoty goes here. Story goes here. хотя эта схема.

а' Дваиии WYOMING MAN FINDS NEEDLE IN HAYSTACK Рис. 5. придающие определенный характер вашему сайту.Строим Web-сайты 46 REAL TRUTH Thetruthyouneed«ltht.4.pria. 5. Можно также попробовать светлый текст на темном фоне. Обратите внимание.o4rana)Yi>rd | • NEWS |*ARCHIVE \* ACCOUNT П 6 W S BsjiMB-aup I *ка«!.. однако это будет тяжелее для глаз . что в этом примере белый цвет отлично подходит в качестве цвета подсветки Рис. Могут быть эффективными светлые оттенки цвета фона.5.

как работает ваш сайт.1. Если вы решили не следовать стандартам. вы уберете еще одно препятствие в удобстве использования. не всегда целесообразно или желательно использовать стандартные цвета гиперссылок. пока посетители будут считать данный цвет синим. Если они стали ожидать. До тех пор. Используйте одни и те же цвета для представления одних и тех же элементов. Эти элементы должны привлекать внимание посетителей. если вообще не будете использовать синий цвет. Возможно. если они смогут использовать это знание. отказаться от стандартов лучше. Конечно. Девизом вашего дизайна должно стать: «Ожидания оправдались». Вы создадите меньше путаницы. Совет Приберегите слишком яркие оттенки для меток на графических кнопках или в качестве цветов гиперссылок. связанными с вашим бизнесом или группой. вы захотите привести ссылки в соответствие с цветами компании или цветами.ГЛАВА 5. поэтому они лучше подходят для экзотических или необычных цветов. Совет Вы не обязаны следовать стандартам вплоть до точных шестнадцатеричных кодов цветов. то полностью избегайте их. Совет Как и в случае с большинством остальных жемчужин традиционной мудрости Интернета. Они представлены в таблице 5. Посетители уже знают из своего опыта. поэтому. Это ключ к обучению посетителей тому. синий и фиолетовый цвета не подходят в общем контексте вашего дизайна. чем заставить их работать. попробуйте более темный или более светлый оттенок. Изо всех сил старайтесь использовать эти цвета ссылок в вашем Web-дизайне. Возможно. стандарты цветов гиперссылок могут неожиданно привести к обратным результатам. Если рекомендуемый оттенок синего вам не подходит. В конце концов. используйте красный цвет для непосещенных ссылок абсолютно везде на вашем сайте. Выбор цветов 47 Выбор цветов ссылок С годами появились два стандарта в отношении цветов гиперссылок. когда придут к вам на сайт. отказывайтесь единообразно. Если вы отказываетесь от стандартов. что красный цвет используется для непосещенных ссылок. ваш сайт будет получать преимущество от традиционной цветовой ассоциации. страница за страницей. . что синий цвет обозначает непосещенную ссылку.

но не полностью. В программе Internet Explorer для операционной системы Windows 98 стандартный фиолетовый цвет для посещенных ссылок был переопределен на зеленый. Стандартные цвета гиперссылок Цвет Обозначает Код цвет a (IE) Код цвета (Netscape) Синий Непосещенные ссылки #0000FF #0000FF Фиолетовый Посещенные ссылки #990099 #663399 Выбор цветов интерфейса Часто задаваемые вопросы Все определяет компания Microsoft? Почти. например. . Использование корпоративных цветов . Догадайтесь. в вашем дизайне должны выразительно использоваться корпоративные цвета. Определение Брендинг . какие цвета изобилуют на соответствующих корпоративных Web-сайтах. Некоторая работа по цветовому дизайну уже может быть сделана. Вспомните красные дуги компании Coca-Cola или золотые дуги компании McDonald's. Вместе с тем. в дизайне. Однако к тому времени фиолетовый цвет уже просочился в коллективное подсознание Интернета в качестве правильного цвета для посещенных ссылок. Корпоративные цвета . приведения сайга к общему корпоративному виду организации. используя элементы из маркетингового материала.это метод приведения сайта к общему корпоративному виду организации.48 Строим Web-сайты Табл. Если вы разрабатываете сайт для бизнеса или организации.это способ брендинга или. на которые департамент по маркетингу затратил много времени и ресурсов. здесь задается зрительное ощущение сайта. логотипы и корпоративные цвета. Как только вы захотите использовать в дизайне логотип группы. Графическая отделка сайта предоставляет вам наибольшую свободу в выборе цветов. например. корпоративные цвета. чтобы ассоциировать их с организацией. Вы не обязаны столько же думать о вопросах удобства использования цвета. и цвет играет немаловажную роль в формировании подходящего настроения.это лишь цвета. 5.1. вы также захотите включить другие признаки фирмы. Программа Internet Explorer для операционной системы Windows XP тихо вернулась обратно к стандартному фиолетовому цвету. другими словами.

суровость Машины скорой помощи. если разрабатывается сайт для финансового или медицинского сектора. Кто сказал. гипс Черный Формальность. можно считать долларом. также плесень. потраченным на продвижение вашего сайта . особенно. вы увидите. тина Синий Доверие. стабильность. что отдел Web-разработок не смеется последним? У цвета ^акже есть психологическое измерение. преданность Униформа полицейских и военных Фиолетовый Роскошь. валентинка Оранжевый Тепло. мрамор. деньги. также мрачность. уныние. успокоение. 5. почему у множества Web-сайтов в основном интерфейсе присутствует синий цвет? Взглянув на таблицу 5. также холодность.пока вы эффективно используете торговую марку на сайте. жестокость.ГЛАВА 5. потраченный на продвижение торговой марки компании в других источниках. униформа медицинских работников. по телевидению. возможно. рост. также ревность. солнцезащитные очки. Бюджет на рекламу вашего сайта. ио крайней мере. стоит учесть при планировании подхода. Но просто подумайте об этом следующим образом. счастье Солнечный свет. величие.2. например. отчужденность.2. буду ли я уважать себя утром? Работа с отделом маркетинга часто оставляет неприятное впечатление. болезнь Леса. исключительность Королевские одеяния Коричневый Устойчивость. интерьер закусочной Желтый Игривость. что у людей синий цвет ассоциируется со стабильностью и доверием . цветы Зеленый Природа. Они тратят деньги. равен нулю. если вы желаете удержать своих посетителей. Вы не задавались вопросом. Однако каждый доллар. пища Камин. печаль Смокинги. изобилие. надежность. скалы Белый Чистота. стоп-сигнал. невинность. предупреждение Пожарная машина. Общие психологические цветовые ассоциации Цвет Ассоциация (западная культура) Примеры Красный Страсть. сила. также снег. жара. Табл. также смерть (старуха с косой) . практичность Земля.два отличных качества для продвижения. свадебные платья. власть. которое. Выбор цветов 49 Часто задаваемые вопросы Если я поработаю с отделом маркетинга. а вы получаете выгоду.

попробуйте использовать более динамичные дизайны и рискните.развлечения. что это будет способствовать атмосфере доверия. красный цвет является цветом непорочности в Индии и Китае. . Невозможно просто превратить цвета в предугадываемые эмоциональные отклики. Трудно предположить. Если ваша цель . Цветовые ассоциации не универсальны. что невеста на Западе наденет красное свадебное платье . применив энергичные цвета. дополните консервативный дизайн успокаивающими цветами. Тем не менее.и тем самым не вызовет насмешек. где он обозначает супружескую измену. многие культуры имеют совершенно отличные интерпретации цветов. Цвет должен быть одной стороной общей стратегии для передачи настроения и назначения сайта.Строим Web-сайты 50 К счастью. дизайн совсем не имеет отношения к науке. в достаточном объеме изучите их культуру. точно так же.предоставить информацию. Если вы разрабатываете сайт для посетителей из разных стран. как нельзя одеть сайт с неудачным дизайном в синие цвета и надеяться. Если ваша цель . Часто задаваемые вопросы Все ли культуры имеют одинаковые ассоциации? Нет.цвета пожарной машины . На самом деле. это очень неудачный цвет на Востоке. И в то время как зеленый цвет на Западе может обозначать богатство.

Простого упоминания словосочетания «специальные возможности» в обычном разговоре достаточно.это мировое сообщество всех людей. если его содержимое доступно для всех. Интернет же является такой графической средой. Интернет не единственное место. Если бы эти люди появились перед вашей дверью. начали думать так же. т. Определение Web-сайт обладает специальными возможностями. чтобы сделать содержимое Web-сайта доступным для каждого. где важны специальные возможности. . предоставить информацию на сайте таким образом. используя свои глаза.е. работающие с компьютерами. Разработка специальных возможностей Вы являетесь дизайнером. кто плохо слышит. Автомобильные стоянки выделяют лучшие места для инвалидов. Разработка специальных возможностей заключается в том. Правительству США запрещено давать подряды исполнителям . однако наделить Web-сайт специальными возможностями на самом деле не так уж и сложно. чтобы причинить страдание некоторым дизайнерам. где легко забыть. Кинотеатры предоставляют специальные места и ряды. включая людей с ограниченными возможностями. Вы не обязаны пытаться передать каждому одинаковые впечатления от сайта.в том числе. чтобы обеспечить легкий доступ людям с физическими недостатками. Интернет является одним из последних мест. если вы не создали Web-сайт со специальными возможностями. Никто не собирается тащить вас в федеральную тюрьму. Теперь в Соединенных Штатах и многих других странах специальные возможности являются вопросом права. Только в конце 1990-х годов люди. Вы просто должны предоставить эквивалентное впечатление. Вы не обязаны разрабатывать способ направления изображений прямо в мозг инвалида по зрению. вы бы не захотели оскорбить их или сделать их визит неприятным. Точно также при разработке Web-сайта вы должны учитывать их особые ситуации.чьи продукты не отвечают нормам по специальным возможностям. Ведь Интернет . То же хотят делать люди с когнитивными расстройствами или с затруднениями при обучении. Вы просто не сможете выгодно устроиться и получать от американских налогоплательщиков семь тысяч долларов за ссылку. более удобные для инвалидов-колясочников. что не каждый человек бродит по Интернету. включая людей с ограниченными возможностями. Общественные здания должны иметь пандусы и лифты. что и нормальные люди. независимо от инвалидности.ГЛАВА 6. чтобы люди с инвалидностью имели тот же уровень доступности. разработчикам Web-сайтов . Телевизионные программы выходят с субтитрами для тех.'где рассматриваются вопросы специальных* возможностей. Инвалиды по зрению тоже желают посещать ваш сайт. На самом деле.

которые только визуальны (например. Поэтому.атрибут a l t тега img. что если вы можете описать словами части вашего сайта. читатели экрана. У них на компьютерах установлено специальное программное обеспечение и оборудование. Да. вы предоставите людям с инвалидностью эквивалентное впечатление о содержимом вашего сайта. например. как добавить текстовые эквиваленты к изображениям. что для этого необходимо . что вам необходимо сделать. что и другие люди. не подозревая об этом. Ваши нетрудоспособные посетители даже пойдут на компромисс. которая показывает гигантские кольца и оранжевые полосы облаков планеты. чтобы сделать изображение доступным. Определение Текстовые эквиваленты . независимо от того. которая появляется в окне браузера при наведении указателя мыши на изображение.gov). который используют инструменты специальных возможностей для поиска и преобразований. изображения). вы уже знаете.section508. Нетрудоспособные люди должны получить ту же информацию. полученная с космического зонда Voyager.представить содержимое таким образом. Все. это разные впечатления.это текстовые описания нетекстового содержимого для использования читателями экрана или другими специальными средствами. создавая сайт со специальными возможностями. преобразователи текст-речь и преобразователи текст-шрифт Брайля. Обычный текст является исходным материалом.52 Строим Web-сайты Часто задаваемые вопросы Где я могу узнать больше о законе по специальным возможностям в Соединенных Штатах? Текст закона Соединенных Штатов по специальным возможностям вы можете найти в 1998 поправке раздела 508 Закона о реабилитации (www. чтобы эти устройства смогли его найти и работать с ним. . желательно присвоить соответствующий текст каждому нетекстовому кусочку содержимого вашего сайта. Этот атрибут определяет текст всплывающей подсказки. но все в порядке. Идея заключается в том. Обеспечение доступности изображений Возможно. Итак. Это и есть текстовые эквиваленты. наподобие следующего: <img s r c = " s a t u r n ."> . увидели они ее на картинке или прослушали текстовое описание этой картинки. Средства специальных возможностей используют атрибут a l t для описания изображения инвалидам по зрению. j p g " alt="Фотография планеты Сатурн. Все. просто задайте ему подробное дублирующее описание.

психологически оскорбительны и тупы концептуально. которые в нем не ьгуждаются. Иногда изображение содержит встроенный текст. касающееся изображений: не разрабатывайте мерцающие. доступен? содержащих текст? Этот текст Как таковой. трясущиеся. Однако читатели экрана не воспринимают буквы и слова на изображении.jpg" alt="Переход в раздел сайта "О н а с " . вам бы больше подошла работа в отделе рекламы. что эти изображения безобразны с эстетической точки зрения. Представьте. Разработка специальных возможностей 53^ Не экономьте на тексте. поэтому они не могут воспроизвести этот текст в более доступном виде. нет. метка на кнопке или легенда на диаграмме. для чего нужно и что делает изображение. " > или так: <img src="macromedia. чтобы выразить сущность изображения. Помните. что вы вернулись на урок литературы и пишете сочинение. что они также способствуют возникновению зрительного напряжения и головных болей у людей с чувствительным зрением и могут привести к приступам у людей. Добавляйте текст для атрибута al t и для таких изображений. Используя слово для описания результата. Часто задаваемые вопросы Как насчет изображений. не будут иметь понятия о том. Для изображений со ссылками попытайтесь вставить в текст атрибута a l t описание того. но и потому. j p g " alt="CaTypH"> Такой тип значения атрибута a l t полезен только тем людям.jpg" alt="nepexofl на сайт macromedia. как в данном случае: <img s r c = " s a t u r n . возможно. чтобы они смогли сформировать в уме четкую картину того. например. вы воспроизводите ненужный видимый контекст. что произойдет при щелчке на изображении.ГЛАВА 6. похожие на некоторые из наименее любимых рекламных баннеров. со стробоскопическим эффектом и подобные раздражающие изображения. инвалиды по зрению. мигающие. .com"> Если в тексте атрибута a l t будет стоять просто «О нас» или «Macromedia». насколько это возможно. как в следующем примере: <img src="aboutus. Предоставьте своим читателям достаточно информации. посещающие ваш сайт. страдающих эпилепсией. Смысл или назначение изображения выясняется из отчетливости и понятности одного описания. Если вы настолько безрассудны в оформлении рекламного объявления. поэтому слова должны быть настолько точными. что готовы создать физические трудности для некоторых ваших посетителей. что вы описываете. Еще одно табу по специальным возможностям. что вы хотите передать своим нетрудоспособным посетителям эквивалентное ощущение. Делать этого не стоит не только потому.

звуковых файлов и клипов QuickTime. Программа Flash MX позволяет вставлять текстовые эквиваленты. Однако важно следущее: ни один из мультимедиа форматов не является доступным на 100%. К сожалению. мультимедиапрезентация должна содержать синхронизированную аудиодорожку. что очень похоже на прямую радиотрансляцию бейсбольного матча. Так. ознакомьтесь с рекомендациями консорциума W3C. отличается своим инструментальным средством Flash MX. зачастую приходится начинать все сначала и разрабатывать ее заново. По этой причине мы не можем просто обобщить информацию мультимедиа-файла простым текстовым описанием. комментирующую действие. тяжелее. которые бы предоставляли ту же информацию в более доступном формате. В качестве альтернативы можно представить содержимое мультимедиа в виде простого текста или создать ряд страниц. все это дополнитель ное содержимое внутри мультимедиа-файла может увеличить его размер. в соответствии с рекомендацией консорциума W3C. клавишные сокращения и другие средства повышения доступности в содержимое Flash-ролика. Более того. использующих формат Flash. что в свою очередь сделает его менее удобным для загрузки и использования вашими посетителями. . или W3C. предпочитают вообще отказываться от мультимедиа. Консорциум World Wide Web. для преобразования в произносимые слова или в шрифт Брайля. Правда заключается в том. средства специальных возможностей обычно не могут извлечь текст. поскольку мы работаем не просто с одним статическим изображением. что большинство мультимедиа-файлов в Интернете не обеспечивает специальных возможностей вообще. вам придется приобрести новое оборудование. сознательно работающие над доступностью. наподобие Flash-роликов. возможно. предлагает несколько решений. например. Даже с большой натяжкой это нельзя назвать волшебными решениями. Чтобы сделать существующую презентацию доступной людям с ограниченными возможностями.orf/WAI. Компания Macromedia. Конечно же. любой тип прогресса обнадеживает. Помимо этого. что технология Flash является самым популярным мультимедиа-форматом на планете. происходящее на экране. Часто задаваемые вопросы Где я могу узнать больше о рекомендациях по специальным возможностям? Всестороннее обсуждение рекомендаций по специальным возможностям можно найти в Интернете по адресу www. особенно людей. и не слушайте тех. однако все они являются трудоемкими и имеют громоздкий и трудный для понимания вид. качественные микрофоны и программное обеспечение для редактирования звука.w3. кто будет утверждать обратное. однако это конкретные шаги в правильном направлении. вместе с полными субтитрами. Если вы желаете использовать мультимедиа на вашем сайте. Компании по разработке программного обеспечения работают над проблемой. находящийся внутри мультимедиа файла. не существует простого и быстрого способа сделать мультимедийные данные доступным. в частности.Строим Web-сайты 54 Обеспечение доступности мультимедиа Обеспечить доступность мультимедиа. которое используют почти все для разработки Flash-роликов. По этим причинам многие Web-сайты. и будьте готовы затратить дополнительные усилия для их правильной реализации. Принимая во внимание.

unlike the inner planets. вам нужно заново пересмотреть вашу стратегию. The planet Saturn is the sixth planet from the sun in our solar system It is the largest planet after Jupiter. Рассмотрим пример на рисунке 6. astronomers have discovered smaller. вы можете использовать цвет для привлечения внимания к элементам страницы. вам необходимо быть осторожным при его использовании. Конечно. поэтому. что переносится в черно-белую среду. думающему о доступности. как показано на рисунке 6. In fact. Однако цвет является таким же визуальным элементом. курсив . . он не должен быть единственной предоставляемой визуальной подсказкой.3. В конце концов. Однако если убрать подчеркивание. Saturn is a gas giant. Разработка специальных возможностей 55 Управление использованием цвета Цвет является бесценным дизайнерским инструментом. хотя цвет и является эффективной визуальной подсказкой или индикатором для гиперссылки или другого элемента. чтобы проводить различия между одним типом содержимого и другим. It is composed mostly of gases. Like Jupiter. Мы используем его для привлечения внимания к определенным элементам страницы. толстую рамку. как подчеркивание помогает определить ссылки в этом текстовом блоке. ^g My Computer Рис. Saturn would float like a beach ball Saturn's majestic rinfls seem solid from a distance. dimmer rings around all the outer planets m recent years except for Pluto.ГЛАВА 6. Если определенные элементы исчезают без использования цвета или если другие элементы теряют необходимое акцентирование. Traveling on Saturn would be very much like flying through an endless sky. многие ваши посетители имеют нарушение цветоощущения. Обратите внимание. which may in fact be a comet. символ стрелки. Подчеркивание помогает привлечь внимание к гиперссылкам в текстовом блоке Совет Попробуйте рассмотреть дизайн сайта в черно-белых цветах.все. возможно. Используйте подчеркивание. как и изображение.2. 6. Saturn has such a small specific density that. где заканчивается текст и начинается гиперссылка. жирный шрифт. как показано на рисунке 6. Мы используем его. как разработчику Webсайтов.1. вы не сможете сказать. Таким образом. which have rocky surfaces. что вы дублируете его. :its nearest neighbor. but they are actually composed of millions upon millions of orbitmgice and rock fragments. ranging in size from dustparticles to boulders 'While Saturn's rings are the most famous and recognizable. if you could drop fee entire planet onto a body of water.1. Просто убедитесь.

astronomers have discovered smaller. In fact. Saturn is a gas giant.Строим Web-сайты 56 File £dit yew Favorites loote Help The planet Saturn is the sixth planet from the sun in our solar system. its nearest neighbor Like Jupiter. It is the largest planet after Jupiter. будет иметь проблемы с поиском ссылок ! The planet Saturn is the sixth planet from the sun in >ur solar system. Saturn would float like a beach ball. не зависящие от цвета . but they are actually composed of millions upon millions of orbiting ice and rock fragments. which may in fact be л comet. It is composed mostly of gases. J My Corrputer Puc. if you could drop the entire planet onto a body of water. Saturn would float like a beadi ball Saturn's majestic rings seem solid from a distance. 6. unhki: the inner planets. ranging in size from dust particles to boulders. gas giant It is composed mostly of gases. Уберите подчеркивание. Saturn has such a small specific density that. which have rocky surfaces. Чтобы заставить работать ссылки без использования цвета. which have rocky surfaces.2. While Saturn's rings are die most famous and recognizable. It is the largest planet after Jupiter. Жирный шрифт подходит так же хорошо. astronomers have discovered smaller. but they are actually composed of millions upon millions of orbiting ice and rock fragments. its nearest neighbor Lake Jupiter. Travelling on Saturn would be very much like fiying through an endless sky. unlike the inner planets.3. dimmer rmgs around all the outer planets in recent years except for Pluto. dimmer rings around all the outer planets in recent years except for Pluto. и тощ кто не может различать цвета. их не обязательно подчеркивать. While Saturn's rings are the most famous and recognizable. Saturn is г. ranging in size from dust particles to boulders. 6. как и любые другие визуальные подсказки. Travelling on Saturn would be very much like flying through an endless sky if you could drop the entire planet onto a body of water. Saturn's majestic rings seem solid from a distance. which may in fact be a comet 'i My Computer Puc.

Это что-то вроде миниатюрной карты сайта для конкретного раздела. Гензель оставил след из хлебных крошек. Безусловно.зло. Никто не хочет быть злой мачехой в чьей-либо сказке. которые ищут обратную дорогу из запутанного леса вашего Web-сайта. Второй раз он проделывает то же самое с хлебными крошками. Удобство навигации У народных и детских сказок можно многому научиться. Поэтому. но. Определение Строка навигации (Breadcrumb trail . к примеру. который помогает посетителям определить. что злая мачеха . .крайне символическими способами. Птицы. что они берутся за решение важных вопросов .ГЛАВА 7. Web-дизайн . эта сказка кажется просто еще одой диатрибой (резкой обличительной речью) против злых мачех.это элемент навигации. Все злые мачехи умирают в страшных муках. если вы познакомитесь с ними внимательно. однако попробуйте представить. хотя на языке Интернета мы называем это следом из хлебных крошек. по котором)' могли бы следовать Гензели и Гретели. где злая мачеха попыталась их оставить. как он и Гретель получают шанс воспользоваться ими. показывающий связь текущей страницы с остальной окружающей структурой. где они находятся в иерархии вашего сайта. живущие в лесу.смелые Гензель и Гретель. что сказал и Гензель своей сестре. Первый раз Гензель оставляет след из белых камешков. Гензель и Гретель умирали с голода. Часто задаваемые вопросы О чем на самом деле сказка о Гензеле и Гретели? В сказке «Гензель и Гретель» Братьев Гримм. склевывают крошки до того. все. злая мачеха дважды пытается оставить своих детей в лесу. Строка навигации .это оставить след из хлебных крошек. то обнаружите.это вы. Но успокойтесь. где они находятся в иерархии вашего сайта. сказку о Гензель и Гретель.дословно «след из хлебных крошек») . они могут показаться детскими игрушками.это элемент навигации. храбрость. а ваши многострадальные посетители . на самом деле подразумевается след из белых камешков. показывающий связь текущей страницы с остальной окружающей структурой. справедливость. однако это не оказывается столь эффективным. чтобы он и его сестра Гретель смогли найти дорогу из леса. Чтобы ваш Web-сайт избежал доли злой мачехи. На первый взгляд. который помогает посетителям определить. . Возьмем. что необходимо сделать.

и. что строка навигации не пытается отразить структуру сайта целиком. которые приобретают больший смысл. когда вы увидите ее. обратный путь к начальной странице. Совет Подобно тому. Она просто показывает посетителям логический путь к текущей странице . вы увидите: Главная страница > Детские сказки > Братьев Гримм > Рапунцель Однако на странице сказки «Золушка» Шарля Перро строка навигации будет выглядеть так: Главная страница > Детские сказки > Шарль Перро > Золушка Обратите внимание. . что ветвь вашего сайта о Европейском фольклоре выглядит следующим образом: Детские сказки • • Братья Гримм • Гензель и Гретель • Рапунцель • Белоснежка и Краснозорька • Эльфы и сапожник Ганс Христиан Андерсен • • Гадкий утенок • Дюймовочка • Новое платье императора • Девочка со спичками . кроме последнего элемента в списке.Строим Web-сайты 58 Это одна из тех концепций. как Гензель начал бросать хлебные крошки. Предположим. что более важно. Переместившись на страницу сказки Рапунцель. представляющего текущую страницу. Обычно все элементы строки навигации являются ссылками. выйдя из дверей дома. всегда начинайте строку навигации вашего сайта со ссылки на первую страницу. Шарль Перро • Красная шапочка • Золушка • Спящая красавица • Синяя борода Строка навигации на странице Братьев Гримм будет выглядеть так: Главная страница > Детские сказки > Братьев Гримм.

Story goes acre. Story goes her». вместо знака окантовки. Story goat here. возможно. Story |p>e* turn. там. Конечно же. посетители могут не понять. Story Stwy goe> here. которые пришли на сайт с сервера поиска. 7. Story goes here. скажем. Story got» here.3. как показано на рисунке 7.ГЛАВА 7. Удобство навигации 59 Строки навигации чрезвычайно полезны. а для разделения элементов использовать знак «больше». 1 goes here. Story got* h«re. Story goes here.1. Story имя here. Stow goe* gerc." Story goe» here. Story goes here. Story (toes here. особенно если сайт имеет сложную структуру с множеством уровней страниц. строка навигации будет полезна настолько.Story goes he goes here. два уровня страниц (основная категория и подкатегория). вместо всех заглавных. но имейте в виду.2. иначе вы получите множество разочарованных посетителей. Story ectet here. Старайтесь размещать строку навигации вверху страницы В конце концов. хорошей идеей является отделение строки навигации от других типов текстовой навигации. насколько вы сделаете ее такой. Соглашение для строк навигации заключается в использовании заглавных и строчных букв. которые . нет необходимости использовать строки навигации. уже привыкли к такому. Попробуйте расположить ее в верхней части страницы." «my goes here. что ваши посетители. Story jitws hen . йогу gw*ht>re. Story goe* here. где посетители будут хорошо видеть ее. Story goe» here. Безусловно. Story goes here. Story goe* here. как показано на рисунке 7.Story goes h«re.1. вы можете экспериментировать с другими видами строки навигации. Story erm here. два метода. Story Roes here. Эти строки помогают посетителям найти обходной путь и предоставляют быструю информацию вроде «Вы находитесь здесь» людям. Story goes rrer?. строки навигации отлично работают в качестве альтернативного метода навигации. Puc. как показано на рисунке 7. Story goes Here. Story goes here. Story SO** here. Story «ruts Ык. Stoty goes here. Все хорошие сайты имеют. "Story goes here. Совет Если глубина структуры вашего сайта не превышает. Story goes here. Story goes here. Если строка навигации будет иметь одинаковый визуальный стиль. Вдобавок к этому. "Stoiygoes here. Home > Fairy Tato > Brotfaere Grimm > Rapunzel BROTHERS GRIMM ПС* u p o n » t i m e . Story goes here. Не пытайтесь строить основную схему навигации по вашему сайту с использованием строк навигаций. Story кое* here. Story goe» here. что к чему. по крайней мере.

^rtory jt*es here. Story goes Puc. SUQi goes he re. Story goes here. Slorygoes here. Story goes here. Story goes here. что и для остальных типов текстовой навигации. Stor>' goe* here. Story goes here. Story goes here. Story go Puc.. а ссылки разделяются знаком «больше». Story goes here. Story goes Ыт goes here. Story goes here. St >ry goes here. Stoiy goes here. Story goe* here." «ttKygcMC here. Story goes here. в котором используются заглавные/строчные буквы для ссылок. Stop. Придерживайтесь стиля. Story goes Irere. Story goes here. Stay goes'here. goes here. Story goes here. Ston. goes here. rtmrgort beta Story goes here. Slo Here. то существенно упростите передвижение для посетителей. Stein-goes here. Однако если вы добавите типичную схему с панелью и строкой навигации. Story goes here.2. Stoiy goes here. Story goes here. Story goes here. He используйте для строк навигации тот же визуальный стиль. Story goes tore.. Stoty goes here. Story goes here.goes here. Storv goes here. Story goes hi -re. Story gc4»gere. Story goes hens. Посетители могут не понять что к чему tales THERS GRIMM Rapunzel 1 п с е u p o n a t i m e . Son' goes b>re." story goes wre. Story goes here. 7. Story goes hen. y goes here. Story got» Story goes here.' got к here. Story goes here. Story вое» here. «ШУСОМЬШЕ. Storj' fr^s here. Si лгу g-oes here. Stoty goes Iterc." Ston. Story goes Ьте. Story goes here. Я goes here. Story goes here. йогу goes gerr.goes here. Story goes here. В ^goes hevt. Stoiy goes here. и вы не ошибетесь . Story goes here. Story got» here. here. Story gt>es here. "Stttry goes here. Story goes here. Sto goes here. 7.* Story (toes here. Si oiy goes here. SWr> goes here. Story goes here. Shin.3. S goe» here. Story искав here. Stcwy go«s here "Story коей here. Story goes here. Story goes here. Sbxygoei here. Story g«s hure.60 Строим Web-сайты ищут ссылку на страницу Ганса Христиана Андерсена в области страницы Братьев Гримм. I чр Ю«# fairy tales BROTHERS GRIMM Rapunzel ПСС u p o n 8 t i m e . йогу goes here.

ГЛАВА 7. чем три уровня страниц. Если вам нужно меньше. <!— &gt. <а href="index. чем три уровня страниц. <!— Скопируйте и вставьте следующую строку необходимое число раз. <!— Последний элемент списка не получает ссылку.htm">Level Two Page Name</a> &gt . Просто замените заполнители правильными путями и названиями страниц вашего сайта.htm">Level One Page Name</a> &gt .htm">Home</a> &gt. если в строке навигации вам необходимо больше. поскольку он представляет текущую страницу. > <а href="levelone. Удобство навигации Инструментарий 61 Строка навигации Добавьте этот фрагмент кода в вашу страницу. удалите соответствующие строки кода. > Level Three Page Name .это код для знака "больше". . > <а href="leveltwo. чтобы создать связанную строку навигации.

демонстрируется.это быстрый указатель на наиболее популярные страницы сайта. и выбранная страница загружается в окне браузера Для построения меню переходов потребуется два компонента: HTML-форма (на ней размещаются различные элементы. Посетители выбирают элемент из списка. это быстрый указатель на наиболее: популярные страницы вашего сайта.ГЛАВА 8. В инструментарии. Совет Меню переходов -это приятная дополнительная возможность для сайта. Определение Меню переходов . старомодной панели навигации. однако не доверяйте ей всю вашу навигацию. 8. как создавать оба компонента. если у вас есть. По существу. . как показано на рисунке 8.1. использование меню переходов Меню переходов . и функция на языке JavaScript (наспех написанная программа. Ne\ ports Business Entertainment Humoi Style Travel Science Culture Puc. иначе называемая пользовательским интерфейсом (Front end)). Choose в ред. на которых щелкает посетитель). Не существует замены для доброй. посетителям не придется перемещаться по сайту шаг за шагом. большой сайт с множеством страниц.это удобный для использования элемент навигации. Таким образом. Используйте подобное меню переходов в качестве указателя на наиболее популярные страницы вашего сайта. которая заставляет работать меню переходов. приведенном в данной главе. а простая функция на языке JavaScript загружает определенную страницу. также называемая прикладной частью (Back end)). Посетитель выбирает страницу в меню.1.

. что замедляет посетителей.к странице. пут.htm. —> <option>First category</option> <!— Следующими идут элементы меню переходов. что как только посетитель выбрал страницу. Какой подход лучше? Трудно сказать. на чем посетитель может щелкнуть после выбора страницы в меню.</option> <!— Следующая строка вставляет название раздела в список элементов меню. меню переходов автоматически выполняет соответствующий переход. Если они решат... или если они захотят открыть другую страницу после осуществленного выбора. как открыли его (на радость отдела рекламы). кнопка Go (Перейти) предоставит им возможность выбрать другую страницу перед переходом. если сомневаетесь. как и гиперссылка. Атрибут s e l e c t e d тега option означает.. например. Ничего не произойдет. относительно документа или относительно корня. —> <option value="firstpath">First page name </option> <option value="secondpath">Second page name </option> <option </option> value="thirdpath">Third page name . для кнопки Go (Перейти) требуется дополнительный щелчок. что этот элемент появится по умолчанию в меню. вероятность совершения ошибки посетилелями уменьшается. пока посетитель не щелкнет на кнопке.ь . когда загрузится страница. Использование меню переходов Что касается меню переходов. может быть абсолютным. поэтому оно быстрее. на которую вы желаете осуществить переход. Альтернативным подходом является использование самоактивирующегося меню переходов. какой подходит лучше. Первый подход заключается в использовании кнопки Go (Перейти) или чего-то еще.пользовательский интерфейс Этот фрагмент кода на языке HTML реализует пользовательский интерфейс вашего меню переходов. <form naitte=" jumpmenu"> <select name~"pages"> <!— Следующая строка'представляет первый элемент в меню. но.63 ГЛАВА 8.htm или . сделайте некую защиту от дурака и используйте кнопку Go (Перейти). чтобы увидеть. —> <option selected>Choose a page. что не хотят использовать меню переходов после того. то существует два подхода. Если использовать кнопку Go (Перейти). В качестве значения атрибута v a l u e укажите. С другой стороны./products/brochure. Путь. aboutua/index. Это означает. Вы можете испытать оба типа меню переходов на вашем сайте. При желании эту строку можно удалить. Для самоактивирующегося меню переходов необходим всего один щелчок. Инструментарий Меню переходов с кнопкой Go .

запустится функция перехода. сколько элементов меню вы хотите видеть в данной части списка. —> <input type="button" onClick="doJumpMenu(). —> </form> Инструментарий Самоактивирующееся меню переходов . сколько элементов меню вам необходимо..пользовательский интерфейс Используйте этот фрагмент кода на языке H T M L для размещения самоактивирующегося меню переходов на вашей странице. на форму и дает указание следить за событием onChange языка JavaScript. —> <select name="pages" oiiChahge="doJumpMenu(). —> <option>Second category</option> <!— Здесь. —> <option selected>Choose a page. Повторите эту строку столько раз. наподобие представленных выше. —> <option name</option> value="fourthpath">Fourth page </select>S <!— Следующая строка добавляет кнопку на форму. <form name="jumpmenu"> <!— Следующая строка добавляет объект выбора.' столько раз.идут дополнительные элементы меню' переходов . Когда посетитель изменит значение формы."> name="go" value="Go" <!— Теперь закройте тег form и все готово.64 Строим Web-сайты <!— Повторите строки.</option> <option>First category</option> <option </option> value="firstpath">First <option value="secondpath">Second </option> <option </option> value="thirdpath">Third <option>Second category</option> page name page name: page names . известный также как открывающийся список."> <!— Остальная часть формы выглядит и работает так же.. после чего закройте тег select. как и предыдущая форма.

если значение атрибута value не было пустым.ГЛАВА 8. если вы добавляете эту функцию во внешний JavaScript-файл. */ var menuValue = menu.. /* Следующая строка получает значение атрибута value для выбранного элемента меню. так и для самоактивирующихся меню переходов. /* Следующая конструкция if/then выполняет переход на выбранную страницу. чтобы заработало меню переходов. Использование меню переходов <option name</option> 65 value="fourthpath">Fourth <!— Добавьте необходимое элементов перехода.pages.href = menuVaiue. */ if (menuValue != "") { location. если вставляете эту функцию внутрь HTML-страницы. Опустите теги s c r i p t . </script> 3-191 .прикладная часть Добавьте эту функцию на языке JavaScript на ваш сайт. selectedlndex].jumpmenu. */ function doJumpMenu() { var menu = document. —> количество page разделов и </select> </form> Инструментарий Меню переходов .value. Данная функция одинакова как для меню переходов с кнопкой Go (Перейти). <script language="JavaScript"> /* Используйте теги s c r i p t только в том случае.options[menu.

Затем добавьте следующий фрагмент кода на языке HTML на свою страницу.. Добавьте желаемое количество р а з делов и элементов меню.Здесь добавляется графическая кнопка Go (Перейти).Строим Web-сайты 66 Инструментарий Меню переходов с графической кнопкой Go (Перейти) Пользовательский интерфейс Если вы желаете использовать графическую кнопку Go (Перейти) вместо стандартной серой кнопки языка HTML. расположенный выше. — > <!— Ниже представлено меню. —> <select name="pages"> <option selectecbChoose <option>First a page. как и все остальные. Оно работает также. . что необходимо. все."> <!— Тег form. -чтобы выполнить скрипт меню переходов.. ожидает события onSubmit. —> <input type="image" name="go" src="imagepath" width="imagewidth" height="imageheight" border="0"> </form> .</option> category</option> <option v a l u e = " f i r s t p a t h " > F i r s t page name </option> <option value="secondpath">Second page name </option> <option </option> value="thirdpath">Third page name <option>Second category</option> <option value="fourthpath">Fourth page name </option> . чтобы создать меню: <form name="jumpmenu" onSubmit="return doJumpMenu GraphicButtonf). </select> <!.это разработать кнопку в любимой программе для работы с графикой.

атрибута menu. Internet Explorer и Netscape. /* Следующая строка предотвращает отправку формы. <script language="JavaScript"> /* Если вы вставляете этот скрипт во внешний JavaScript-файл. * / location.href = menuValue. Использование меню переходов Инструме нтарий 67 Меню переходов с графической кнопкой Go (Перейти) прикладная часть Для меню переходов с графической кнопкой Go (Перейти) необходима немного отличающаяся функция на языке JavaScript.jumpmenu.r /* Следующая строка получает значение value для выбранного элемента меню. если значение атрибута value не было пустым . например.value. */ return false. браузер пытается отправить форму. оставьте теги s c r i p t . </script> . */ return false.options[menu. Ч function doJumpMenuGraphicButton() { var menu = document. рассматривают кнопки-изображения в качестве кнопок отправки данных когда посетитель щелкает на такой кнопке. */ var menuValue selectedlndex]. Web-браузеры. что нежелательно и в чем нет необходимости для простого меню переходов. } else { /* Следующая строка выполняет переход на выбранную страницу. не нужны.ГЛАВА 8. Если вы вставляете этот фрагмент кода в HTML-документ. теги s c r i p t . находящиеся в начале и в конце данного листинга.pages. if (menuValue == "") { /* Следующая строка предотвращает отправку формы. и добавьте код в -раздел head вашей страницы. Эти небольшие дополнения в функцию предотвратят отправку формы браузером.

когда всплывающие окна были на пике популярности. Они заняли свое место в Web-дизайне. Управление всплывающими окнами В фэн-шуй Web-дизайна всплывающие окна подобны кабинету с углами странной формы. но второстепенной информации. Определение Всплывающее окно . Всплывающие окна отлично подходили для вызова экранов помощи. медленно загружающихся окон с содержимым. называя их враждебными по отношению к пользователю. у которых нет других проблем.это отдельное. Однако всплывающие окна стали конкурентоспособными. считая их лично оскорбительными и полагая что их могут делать только люди. расширенных описаний и других кусочков полезной. в более понятный. как представленный на рисунке 9. который не всем подходит. едва имеющим отношение к сайту. всплывающие окна все еще могут оставаться ценным свойством вашего сайта. быстрых определений. Они не стали менее полезными для отображения второстепенного содержимого со времени. При правильном использовании всплывающие окна помогали сделать схему навигации более изящной и сфокусированной. Поэтому всплывающие окна везде потеряли доверие. в то время как продолжают открываться всплывающие окна с рекламой.ГЛАВА 9. Они могут превратить во всех отношениях неудобный дизайн.1. Позднее корыстные рекламодатели. наполненными ненавистью.2. в котором загружается предопределенная страница. и дизайнеры не используют ихтю назначению. взяли на вооружение всплывающие окна и превратили их в раздражающую сферу спама. содержащие существующий сервис Web-сайта. . которая не заслуживала помещения на собственн\ю страницу. Некоторые люди никогда не любили всплывающие окна. как показано на рисунке 9. обычно меньшее по размерам окно браузера. которое вы не запрашивали или не хотели получить. вроде людей из отдела рекламы. сверкающих. которое вам не нужно. Необычно видеть всплывающие окна. Если вы желаете перевоспитать своих посетителей и иметь дело со случайными электронными письмами. Скоро вы не сможете посетить какой-либо ресурс в Интернете без многократно повторяющихся.

ГЛАВА 9. comets. 9. но неуклюжая реализация.2. Если же загрузить определения во всплывающее окно. посетителям не придется терять место.1. and other heavenly bodies in orbit around a star Puc. чтобы получить вспомогательную информацию . Хорошая идея. moons. 9.) ' Collectively. Посетитель вынужден переходить по страницам взад и вперед. где они остановились в основном тексте. Управление всплывающими окнами 69 Рис. the planets. В этом дизайне щелчок на термине приводит к загрузке страницы с определением. что прерывает поток основного текста solar system (n.

после того. эта работа ложится на основные страницы. вам следует еще раз подумать о своей стратегии. когда посетитель определенно щелкнул на ссылке или кнопке. Не пытайтесь его переполнять слишком большим количество ч дизайна. выполняющий эту задачу. как в случае обычной ссылки: <а href="popup. Вот несколько руководящих принципов: • Делайте их небольшими. сделайте простым закрытие всплывающего окна.">0pen the popup win- dow</a> • Эта функция приказывает браузеру открыть страницу в отдельном окне. Большие всплывающие окна с множеством изображений и сложными макетами могут слишком долго загружаться. написанную на языке JavaScript: <а href="javascript:doPopup('popup. разработанное с умом всплывающее окно. Поскольку некоторые люди никогда не побеспокоятся посмотреть на самое невинное.htm'). Содержимое всплывающих окон должно быть коротким и приятным. Создание Всплывающих окон Всплывающее окно на самом деле является такой же простой страницей. а не загружать ее в основном окне. что всплывающие окна наилучшим образом подходят для быстрого отображения второстепенной информации. Однако вместо указания пути. Содержимое всплывающего окна помещается в HTML-файл. что загружается моргающее приставание. Помните. Всплывающие окна приобретают бол ьший смысл.htm">0pen t h e popup window</a> мы направляем браузер на простую функцию. и в любом месте на сайте можно создать ссылку на всплывающее окно. что появляется необходимость создания в окне полос прокрутки. • Не полагайтесь на них. выполняя вспомогательную функцию. как это делается для обычной Web-страницы. возможно. В любом случае.Строим Web-сайты 70 Хитрость заключается в эффективном использовании всплывающих окон. как оно было открыто. Если вы развернулись так. как и любые другие. Кроме того. Это относится к физическим размерам всплывающего окна (которые можно контролировать) и к помещаемому в него объему содержимого. Не заставляйте всплывающие окна открываться автоматически! Всплывающее окно должно открываться только тогда. • Предоставьте управление посетителям. например. не используйте их для критически важного содержимого.к странице. что даст вашим посетителям все причины полагать. коротенькие страницы помощи. Вы можете написать собственный код на языке JavaScript. или можете использовать следующий код: . Большие порции информации находятся на законченных страницах вашегосайта. • Фокусируйтесь на его содержимом.

'width=400.ГЛАВА 9. Язык JavaScript предоставляет достаточное количество возможностей для управления размерами и поведением нового окна. во всплывающем окне загрузится неожиданное содержимое или знаменитая страница File Not Found (Файл не найден).' </script> На рисунке 9. status=YES'). если вам необходимо освежить память. Замените слово name в предыдущем скрипте на слово popup. Поэтому. если вы хотите для всплывающего окна отобразить поле адреса и строку состояния в функции doPopup ( ) . . сколько пожелаете.open(popupPath. где расположена вызывающая страница.height=200.1 приведены некоторые распространенные свойства. Charlie или любое другое слово..location=YES. если вы передали в функцию правильный путь. как в следующем примере: <script language="JavaScript"> function doPopup(popupPath) { window.scrollbars=YES'). Управление всплывающими окнами <script 71 language="JavaScript"> function doPopup(popupPath) { window. help. . Инструкция window. следующего за путем.open(popupPath. 'width=300.">Get help</a> или любой возможный правильный путь. За именем окна следует список свойств. просто расширьте набор свойств.scrollbars=YES.htm'). которое вам нравится. open в качестве второго параметра. Вставьте путь между одинарными кавычками./help/info. Если передать в функцию неправильный путь. Всплывающему окну можно присвоить уникальное имя.просто отделяйте свойства друг от друга запятой и не вставляйте пробелы после запятых. В таблице 9.3 показаны различные части окна браузера. window. В одной строке можно объединить столько свойств. которое передается в инструкцию window.'name'. open позаботится обо всем.'name'. следует отформатировать ссылку подобным образом: <а href="javascript:doPopup('.height=15 0. } </script> Вот и все. в котором определяется внешний вид всплывающего окна. если HTML-файл вашего всплывающего окна находится не в той папке. Итак.

1.Строим Web-сайты 72 Табл.toolbar=YES тов во всплывающем окне width Задает ширину всплывающего окна в пикселах width=150 Рис.resizable=YES му всплывающего окна scrollbars Отвечает за отображение горизонтальных и scrollbars=YEE вертикальных полос прокрутки во всплывающем окне. Вот части окна браузера: (А) Адресная строка. 9.3. (С) Панель инструментов. если необходимо status Отвечает за отображение строки состояния во status=YES всплывающем окне toolbar Отвечает за отображение Панели инструмен. 9. Распространенные свойства всплывающего окна Свойство Описание Пример height Задает высот)' всплывающего окна в пикселах height=300 location Отвечает за отображение поля адреса во location=YES всплывающем окне menubar Отвечает за отображение строки меню во menubar=YES всплывающем окне resizable Позволяет посетителю изменять размер и фор. (D) Полоса прокрутки. (В) Строка меню. (Е) Строка состояния .

когда всплывающее окно используется для отображения подсказок помощи.закрыть его. Всплывающее окно снова исчезнет из вида. спрятанной иод главным окном браузера. Перемещение всплывающего окна на передний план Одна из проблем со всплывающими окнами заключается в том. 'proper- Как видите. добавьте событие onLoad к тегу body HTML-файла всплывающего окна: <body onLoad="window. popupName.ГЛАВА 9. когда посетитель щелкнет на главном окне браузера. но только когда загрузится страница. Единственный способ избавиться от подобного всплывающего окна . Если ваш сайт загрузит другую страницу в открытое всплывающее окно . после чего инструкция window. когда всплывающее окно теряет свою верхнюю позицию. open (popupPath. возможно. Управление всплывающими окнами 73 Совет Если на вашем сайте используются различные типы всплывающих окон. Чтобы сделать это. просто внесем небольшие изменения в код JavaScript-функции: function ties) { doPopup(popupPath. Всплывающие окна сворачиваются на панели задач вместе с небольшой коллекцией рекламы. чтобы использовать эти значения. этот код передает три значения в функцию doPopup. попробуйте следующее: •cbody onBlur= "window. что всплывающее окно займет верхнюю позицию на рабочем столе. popupName. f o c u s перемещает всплывающее окно обратно на передний план. Теперь. ties').опущенное всплывающее окно не перепрыгнет обратно наверх.'^ 'name'. focus гарантирует. Чтобы сделать это. "> Событие onBlur происходит всякий раз. Если вы действительно хотите раздражать ваших посетителей и предотвратить исчезание всплывающего окна из вида. вы захотите присвоить каждому типу различные имена и различные наборы свойств. . popupProperties). f o c u s () . "> Инструкция window. . если вы определенным образом не заставите его сделать это.focus() . что они стремятся исчезнуть из вида. popupProper- window. измените ссылку на всплывающее окно подобным образом (подставив реальные значения вместо заполнителей): <а href= "javascript :doPopup ('path'.это происходит часто. а не одно.

2. Добавление ссылки Close Простой трюк с использованием языка JavaScript позволяет добавить ссылку Close (Закрыть) в тело вашего всплывающего окна. . как камень. Ваше всплывающее окне может быть крепче чем Титаник. c l o s e делает все.">Clcse</a> Для этого даже не нужно создавать отдельную функцию. что было продемонстрировано на рисунке 9. никогда не используйте в дизайне нескрывающие ся всплывающие окна. никогда. Код для этой ссылки выглядит следующим образом: <а href="javascript:window. но ваш сайт утонет. Одна инструкция window.Строим Web-сайты 74 Совет Никогда. что вам необходимо.close(). Когда посетители щелкнут на этой ссылке. избавив их от необходимости использовать кнопку X вверху окна. всплывающее окно закроется.

включая и открывающиеся меню. имейте это в виду. программа Internet Explorer с версии 5 и программа Netscape с версии 6 поддерживают метод g e t E l e m e n t B y l d языка JavaScript. доступны уже пару лет. Несомненно вы видели их в Интернете. Randy's Мен & Used Planets GAS GIANTS TERRAFORMEO BARGAIN BIN Рис. у более старых браузеров есть проблемы с данным методом. Вы наводите указатель мыши на элемент главного меню навигации. Открывающееся меню обладает стильным эффектом. упрощающий написание скриптов для всех видов интерактивных возможностей. и теперь они являются доминирующими браузерами в Интернете. К счастью.это СПИСОК элементов навигации.1. который появляется при наведении указателя на элемент в главном меню навигации. Тем не менее. 10. Создание открывающихся меню Открывающиеся меню очень популярны в наши дни. используя этот метод. Реализация открывающихся меню была кошмаром. поэтому для большинства типов сайтов можно с чистой совестью писать скрипты.ГЛАВА 10. понимающие функцию g e t Element Id. как показано на рисунке 10. как всплывающее меню Определение Открывающееся меню . Ничто не говорит о стиле так. .1. поэтому. Браузеры. и появляется меню со связанными элементами.

. называемые слоями. В этом отношении слои похожи на окна на рабочем столе. слои можно накладывать друг на друга и свободно размещать в любой позиции на странице . или элементы разделов (Div elements). Everywhere a layer layer Puc. слои можно накладывать друг на друга и размещать в любой позиции на экране. или DHTML. .Строим Web-сайты 76 Определение Динамический HTML. .2.это блоки с содержимым.это блок с содержимым. В отличие от ячеек таблиц. предоставляют меню. Понятие слоев Слои (Layers) таблиц CSS. а несколько простых функций на языке JavaScript оживляют меню. ИЛИ элемент раздела. Типичное открывающееся меню является отличным примером языка DHTML в действии. Слои таблиц CSS . There a layer.это комбинация языков HTML и JavaScript. и каскадных таблиц стилей (CSS). расположенные на Web-странице. ячеек таблиц.. Here a layer. Макет навигационной панели создается на языке HTML. В отличие от плоских элементов. . Динамический HTML. например.. Элементы таблиц CSS. 10. В отличие от «плоских» элементов. или DHTML. слои можно накладывать друг на друга и размещать в любой позиции на экране.это блоки с содержимым. которая применяется для создания интерактивных Web-сайтов.. размещенный на Web-странице. Определение СЛОЙ. например ячеек таблиц. как показано на рисунке 10. основанный на таблицах CSS.2..это комбинация языков HTML и JavaScript и каскадных таблиц стилей (CSS).

что и использует большинство разработчиков для создания эффекта всплывания в открывающихся меню. но посетитель не может увидеть их или взаимодействовать с ними. Затем начинает действовать JavaScript-функция и изменяет значение свойства v i s i b i l i t y для слоя. Создание открывающихся меню 77 Над слоями можно производить любые действия.3. Их можно сделать перетаскиваемыми. пока посетитель не наведет указатель мыши на определенную «горячую» точку. неосязаемые и на них нельзя щелкнуть. Каждое открывающееся меню находится на отдельном слое. 10. Меню все еще находятся там же . Меню остаются в данном состоянии до тех пор.они запрограммированы в коде. Однако вместо того. В результате отобразится скрытый слой. Их можно анимировать.3.png@100% /От. как показано на рисунке 10. Они напоминают привидений: невидимые. Другой скрипт. снова заставляет слой стать невидимым. И можно сделать так. на ссылку в навигационной панели. Каждое открывающееся меню размещается на отдельном слое. чтобы сделать эти слои видимыми. который вы хотите показать. вы указываете. который прячет меню.ГЛАВА 10. как показано на рисунке 10. чтобы они исчезали и появлялись снова по желанию. используя язык JavaScript. и у вас будет открывающееся меню. что по умолчанию они должны быть спрятанными или невидимыми. например. Для создания эффекта всплывания по умолчанию слои спрятаны или невидимы . Можно изменять размер слоев. §1 10-03. когда посетитель завершает работу с ним. Randy's New & Used Planets VEHICLES* SUITS Рис.4.

10. Разделим получившуюся ширину на пять одинаковых частей. Чтобы заставить их работать на практике в вашем макете. Наведение указателя мыши на категорию навигационной панели приводит к отображению соответствующего слоя Размещение открывающихся меню Будем надеяться. Начните с приблизительного наброска дизайна навигационной панели и вычисления размера каждой ячейки таблицы . что высота навигационной панели известна и составляет 19 пикселов. и мы хотим уместить навигационную панель на экране шириной 800 пикселов.4. 10. Предположим. поэтому перед тем. что логика. Хотите . лежащая в основе открывающихся меню. -< -*-152px-*-j 760 рх >- I Рис. подготовьте черновик и выполните несколько набросков и вычислений. как показано на рисунке 10. Отнимаем 40 пикселов для полос прокрутки и прочего и получаем навигационную панель шириной 760 пикселов.нет. хотите . что у нас есть навигационная панель с пятью основными категориями. ширина каждой из которых составляет 152 пиксела.5.Строим Web-сайты 78 Рис.верьте. но наилучшим подходом на самом деле является математический подход.5. проста. может понадобиться немного тяжелого труда. Предположим также. как начать кодировать.

упростим себе жизнь и возьмем высоту в 19 пикселов в качестве стандартной высоты элемента меню. . marginwidth и marginheight в теге body. не забудьте добавить дополнительное свободное место в дизайн изображений. как показано на рисунке 10. Чтобы выровнять слои с ячейками таблицы. сколько навигационных элементов вы хотите расположить на конкретном слое. и border. или 133 пикселов. По горизонтали размещение слоев начинается с 0 (без смещения от левой стороны) и позиция каждого нового слоя увеличивается на 152. так и в программе IE. а высота меню с семью элементами . Необходимо рассчитать высоту каждого слоя.6. Очевидно. положение каждого слоя выражается в смещении от верхней и левой стороны окна браузера. Теперь перейдем к слоям. Поскольку высота навигационной панели равняется 19 пикселам. которая зависит от того. обязательно установите значения следующих атрибутов промежутков в 0: leftmargin. Размещение слоев по смещениям от верхней и левой стороны окна браузера Совет ЕСЛИ внутри открывающихся меню вместо текстовых ссылок вы используете изображения. как и ширина каждой ячейки таблицы навигационной панели. cellpaddingи cellspacing в каждом теге table. что это число может изменяться от меню к меню. Мы знаем ширину каждого слоя: 152 пиксела.19 умножить на 7. мы желаем разместить слои по вертикали с отступом. 760 рх Рис. если высота навигационной панели составляет 19 пикселов. topmargin. Создание открывающихся меню 79 Совет Чтобы данные расчеты соответствовали как в программе Netscape. Это поможет сделать меню менее сдавленными. Таким образом.6. Высота меню с тремя элементами должна составлять 57 пикселов (19 умножить на 3). 10.ГЛАВА 10. равным 19 пикселам от верхней стороны экрана.

наконец. как показано на рисунке 10. используя одну строку для каждого элемента меню. 10. Сяеяогт 1 Category 4 Рис.Строим Web-сайты 80 И. 760 рх -152 рх- •Р» Рис.8.8. c e l l p a d d i n g и c e l l s p a c i n g . Однако придется изменить высоту слоев.9. в навигационной панели и в меню используются текстовые ссылки.7. Данный инструментарий создает систему открывающихся меню . создайте таблицу для меню в каждом слое.. С установленными в 0 значениями свойств border. Замените текстовые ссылки изображениями.7. Для простоты. как показано на рисунке 10. чтобы разместить более высокие таблицы. таблицы выглядят компактными. и ваш макет будет выглядеть еще лучше. у которых достаточно свободного места по вертикали. Каждый элемент меню получает отдельную строку в таблице Инструментарий Создание открывающихся меню Этот DHTML-документ демонстрирует создание системы открывающихся меню. как показано на рисунке 10. Поместите таблицу внутрь каждого слоя для меню. 10.

style. при этом скрывая четыре тальные меню.vi sibility="hidden". style. . style.style. 7 if (popupMenu == "menul") { нападеос- document. 10. Создание открывающихся меню 81 Рис.vi sibility="hidden". Она получает ID соответствующего меню и лает это меню видимым.getElementByld("menu5"] . document. document.getElementById("menul") .vi sibility="hidden". style. когда посетитель водит указатель мыши на элементы навигационной нели.vi sibility="hidden". и меню не будут выглядеть сдавленными <html> <head> <title>Popup Menus</title> <script language="JavaScript"> function doShowHide(popupMenu) { /* Данная функция выполняется. Замените текстовые ссылки собственными изображениями (добавив достаточно свободного места по вертикали).getElementByld("menu4".9.getElementById("menu2") . document. document.ГЛАВА 10.vi sibility="visible". if (popupMenu == "menu2") { .getElementByld("menu3"] .

style.style.getElementByld("menu2").style.vL sibility="visible". sibility="hidden".Строим Web-сайты 82 document.vi sibility="hidden". document .style.getElementByld("menu5"). document.style.getElementByld("menu4").vi sibility="hidden".getElementByld ("menu4") .getElementByld("menu3").getElementByld("menu2").style. document.getElementByld("menu4").style. .getElementByld("menu5"). document.getElementByld("menu3"). style. document.getElementByld("menu3").vi sibi1ity="hidden" . if (popupMenu == "menu4") { document .getElementByld("menu2"). document. document.getElementByld("menul").style.style. document.vi sp.style.style.vi sibility="hidden".style.vi Sibility="hidden". sibility="hidden".style.getElementByld("menul"). v::. document.style.vi sibility="hidden". document. document.vi sibility="hidden". document.bility="hidden" . document.vi sibility="hidden".vi sibility="visible". if (popupMenu ==' "menu3") { document.getElementByld("menul"). if (popupMenu == "menu5") { document. vi.getElementByld("menu2").style.getElementByIdv( "menul") .vi sibility="visible".vi sibility="hidden".vi sibility="Hidden".vi sibility="hidden".getElementByld("menu5").style.

Если вам нужно меньше элементов. . когда посетитель щелкает на кнопке Close (Закрыть) внизу меню./script> </head> <body leftmargin=. Просто не забудьте разместить таблицу между тегами div.это таблица.style. удалите строки из таблицы. пять.style. Ширина. Создаем код для открывающихся меню."O" topmargin="0" marginwidth="0" marginheight=" 0 " > <!— Теперь по порядку.style. Само меню . добавьте строки в таблицу. чрезвычайно важный для JavaScript-функций. Просто. умноженная на число элементов в меню. состоящая из шести строк: по одной строке для каждого из пяти элементов меню и еще одна строка для ссылки Close (Закрыть).ГЛАВА 10. как пирог. которые вставляют элемент в слой.это высота элемента меню (19 пикселов).getElementByld(popupMenu).style. исходя из ширины навигационной панели (7 60 пикселов) . как размещение слоя выражается в виде смещений от левой и верхней границ.getElementByld("menu5"). Она получает ID текущего меню и затем прячет это меню. <. равная 152. Обратите внимание на тег div.getElementById("menu3"). */' document.vi sibility="hidden".getElementByld("menu4"). Высота слоя . Создание открывающихся меню 83 document. деленной на число основных категорий. document. шесть (включая ссылку Close (Закрыть)). Значения атрибутов width и height задают физические размеры слоя. В значении атрибута style обратите внимание. Высота. приведенных выше. у которого свойство id задает ID слоя. document. равная 114. получилась.vis ibility="hidden". function doHide(popupMenu) { /* Эта функция запускается.vi sibility="visible". Если необходимо больше элементов.vi sibility="hidden".

После того. не забудьте соответствующим образом изменить значение высоты."> <table width="152 cellspacing="O"> border="0" cellpadding="O" <tr> <tdxa href="path01">Subcategory l</ax/td> </tr> <tr> <tdxa href="path02">Subcategory 2</ax/td> </tr> <tr> • • < t d x a href="path03">Subcategory </tr> 3</ax/td:> ' <tr> < t d x a href="path04">Subcategory 4</ax/td> </tr> <tr> < t d x a href ="path05">Subcategory 5</ax/td> </tr> <!— Эта строка содержит элемент Close (Закрыть) внизу меню. Ссылка передает ID меню для закрытия." >Close</ax/td> </tr> </table> <!— Этот элемент div содержит второе открывающееся меню. visibility: hidden. top: 19px. — > . —> <div id="menul" style="position: absolute. width: 152px. lefts Opx.Строим Web-сайты 84 изменяется в зависимости от высоты каждого элемента меню и общего числа элементов в меню. —> <tr> <tdxa href =" javascript :doHide ( 'menul' ) . как и первое. height:114px. что делает слой невидимым по умолчанию. как вы поработаете с размером и форматом каждого меню для размещения на вашем сайте. элемента меню. Обратите внимание. что значение атрибута visibility установлено в hidden. Оно работает так же. Число 19. не высечено в камне. Щелчок на этой ссылке запускает функцию doHide. используемое в качестве высоты каждого.

"> <table width="152" cellspacing="O"> border="0" cellpadding="O" <tr> <tdxa href="pathll">Subcategory l</ax/td> </tr> <tr> <tdxa href="pathl2">Subcategory </tr> <tr> 2</ax/td> . width: 152px. visibility: hidden.- <tdxa href = "path08">Subcategory 3</ax/td> </tr> <tr> <tdxa href="path09">. top: l-9px. height: 114px. left: 152px. height: 114px. width: 152px. left: 304px."> <table width="152" cellspacing="0"> border="0" cellpadding="O" <tr> <tdxa href="path06">Subcategory l</ax/td> </tr> <tr> <tdxa href="path07">Subcategory 2</ax/td> </tr> <tr> .85 ГЛАВА 10.Subcategory 4</ax/td> </tr> <tr> ' <tdxa href="pathlO">Subcategory 5</ax/td> </tr> <tr> < t d x a href = " javascript :doHide ( 'menu2 ' ) . —> <div id="menu3" style="position: absolute. . top: 19px. " >Close</ax/td> </tr> </table> <!— Этот элемент div содержит третье открывающееся меню. visibility: hidden. Создание открывающихся меню <div id="menu2" style="position: absolute.

" >Close</ax/td> ."> •stable width="152" border="0" cellspacing="O"> cellpadding=":" <tr> <tdxa href="pathl6">Subcategory l</ax/td> </tr> <tr> <tdxa href = "pathl7">Subcategory 2</ax/td> </tr> <tr> <tdxa href ="pathl8">Subcategory 3</ax/td> </tr> <tr> <tdxa href="pathl9">Subcategory 4</ax/td> </tr> <tr> <tdxa href="path20">Subcategory 5</ax/td> </tr> <tr> <tdxa href =" ja\rascript :doHide ('menu4 ') .Строим Web-сайты 86 <tdxa href ="pathl3">Subcategory 3</ax/td> </tr> <tr> <tdxa href ="pathl4">Subcategory 4</ax/td> </tr> <tr> <tdxa href="pathl5">Subcategory 5</ax/td> </tr> <tr> <tdxa href = " javascript :doHide ( 'menu3 ') . left:' 456px. top: 19px. —> <div id="menu4" style="position: absolute. width: 152px. height: 114px. " >Close</ax/td> </tr> </table> <!— Этот элемент div содержит четвертое открывающееся меню. visibility: hidden.

наконец.ГЛАВА 10."> <table width="152" border="0" cellspacing="O"> cellpadding="O" <tr> <tdxa href="path21">Subcategory l</ax/td> </tr> <tr> . <tdxa href = "path22">Subcategory 2</ax/td> </tr> <tr> <tdxa href="path23">Subcategory 3</ax/td> </tr> <tr> <tdxa href="path24">Subcategory 4</ax/td> </tr> <tr> <tdxa href="path25<">Subcategory 5</ax/td> </tr> <tr> <tdxa href = " javascript :doHide('menu5') . width: 152px. " >Close</ax/td> </table> <!— И. Остальное содержимое спрятано в невидимых слоях. Это первый (и единственный) видимый элемент на странице. left: 608px. top: 19px. height: 114px. —> <table width="760" cellspacing="O"> <tr> <td width="152"> border="0 cellpadding="O" . таблица. —> <div id="menu5" style="position: absolute. создающая навигационную панель. Создание открывающихся меню 87 </tr> </table> <!— Этот элемент div содержит пятое открывающееся меню. visibility: hidden.

—> <а href="path26" ('menul'). передавая в функцию ID соответствующего меню. В данном случае горячей точкой является ссылка ряя Category 1."> Category 3 </td> <td width="152"> <a href="path29" "( 'menu4 ' ) ."> onMouseOver="doShowHids Category 1 </td> <td width="152"> <a href="path27" ('menu2'). Category 2 </td> <td width="152"> <a href = "path28" onMouseOver="doShowHi in ('menu3'). Посетитель наводит указатель мыши на эту ссылку. и браузер запускает функцию doShowHide.Строим Web-сайты 88 <!— Событие onMouseOver возникает. " > Category 5 </td> </tr> </table> </body> </html> onMouseOver="doShowHide ."> onMouseOver="doShowHid-. "> onMouseOver="doShowHide Category 4 </td> <td width="152"> <a href="path30" ('menu 5') . когда посетитель помещает указатель мыши над «горячей» точкой.

Всегда предоставляйте посетителям возможность вернуться обратно на страницу. наподобие представленной на рисунке 11. Для такого сценария предоставление обратного пути является не таким уж простым действием. поскольку посетитель имеет возможность сделать несколько шагов за один раз.ГЛАВА 11. Предоставление обратного пути сводится к простому размещению на каждой странице нижнего уровня ссылки. На самом деле. чтобы выйти. Разработка хорошей навигации помогает предотвратить эффект павильона смеха. В этой схеме навигации посетители переходят от страницы верхнего уровня к страницам нижних уровней шаг за шагом. ссылающейся на следующую верхнюю страницу в структуре сайтадочно так же. хороший Web-сайт обычно является нелинейным. как на каждой странице верхнего уровня размещается ссылка на следующую страницу нижнего уровня. а когда повернулись. чтобы посетители чувствовали себя затерянными в океане. для нелинейного сайта предоставление обратного пути является еще более важным из-за абсолютного количества возможностей. как связывание страниц в обоих направлениях. кроме как для карнавала. воспользовавшись определенными элементами на начальной странице. Однако в Интернете существует достаточное количество сайтов. которые по существу делают то же самое . похожих на павильон смеха. Но не забывайте также включать пошаговые переходы. Мы бы создали беспорядок на экране. разместив ссылки на все возможные ссылаемые страницы. Совет Когда посетитель опускается вглубь структуры сайта на несколько уровней.выбрасывают посетителей на страницу. удачно разработанным. Вы бы не стали разрабатывать проект такого дома. Схемы. Обеспечение путей отхода Представьте. не предоставляя при этом пути назад. дверного проема уже не было. Это очень удобно. . принято связывать каждую из страниц нижнего уровня непосредственно со страницей верхнего уровня. перейдя через раздел Specials (Специальные предложения) или перепрыгнуть прямо на страницу продукта.1.2. В данном случае посетитель может попасть на страницу продукта несколькими различными путями: выполняя переход по иерархии шаг за шагом. В то же время. позволяя посетителю выполнять большие скачки по структуре сайта в интересах скорости. прямолинейным способом. что вы вошли в комнату через дверь. которую они посетили непосредственно перед текущей страницей. понятным. совсем не редкость. Рассмотрим диаграмму на рисунке 11. Множество Web-сайтов не строго придерживается подобной прямолинейности. Вы же не хотите.

обеспечивайте связи в обоих направлениях: со страницы верхнего уровня на страницу нижнего и со страницы нижнего уровня на страницу верхнего Начальная страница Музыка Специальные предложения Страницы исполнителей Страницы продуктов Рис. Нелинейный сайт предоставляет множество способов получения одной и той же страницы. Когда сайт построен с использованием линейного способа.Строим Web-сайты 90 Начальная страница Музыка ±± Страницы исполнителей Страницы продуктов Рис. 11.1.2. 11. Предоставление обратного пути не является таким же простым. как связывание страниц в обоих направлениях .

1. коли на то пошло). Совет Некоторые дизайнеры. Табл.go(3). воздержитесь от побуждения управлять навыками работы посетителя с браузером. даже если ваша навигация является безупречной. Пожалуйста. какую дверь используют ваши посетители. однако ссылка Go Forward (Перейти вперед) или ссылка Go Two Steps Back (Перейти на два шага назад) создают неразбериху. " > G o back</a> Метод h i s t o r y . ное значение) или на х шагов назад (отриhistory. якобы посетитель каким-то образом забудет закрыть окно браузера и никогда больше не вернется. что делает бессмысленным размещение ссылки Go Back (Перейти назад) на странице. иначе ваши посетители будут просто использовать кнопку Back (Назад) своего браузера. чем на интерфейс сайта. Методы объекта history языка JavaScript Метод Описание Пример back() Переходит на один шаг назад history. back работает точно так же. b a c k ( ) . чтобы ссылку Go Back (Перейти назад) было просто найти. слишком тесно сотрудничающие с отделом рекламы. Это также отвлечет их внимание от сайта и его содержимого. Метод h i s t o r y . поскольку замедляется его работа. Некоторые посетители предпочитают использовать интерфейс браузера. как и кнопка Back (Назад). 11.go(-2) цательное значение) . ощущают необходимость заблокировать кнопку браузера Back (Назад). который выполнит эту работу. b a c k .ГЛАВА 1 1 . они воспользуются кнопкой Back (Назад) своего браузера. Совет Сделайте так. что не очень хорошо. Метод загружает предыдущую страницу. Обеспечение путей отхода 91 Если посетители потеряются. однако применяйте их умеренно. В таблице 11.back() forward() Переходит на один шаг вперед history. Простая ссылка с использованием языка JavaScript полностью решает эту проблему: <а h r e f = " j a v a s c r i p t : h i s t o r y . чтобы заставить пользователя остаться на сайте. ссылка Go Back (Перейти назад) оставит открытой для них ту же самую дверь. Ваш сайт никогда не должен блокировать кнопку Back (Назад) (или любые другие кнопки браузера. Кто посмеет осудить их? Обычно посетители больше полагаются на интерфейс браузера. Не имеет значения.это не единственный метод объекта h i s t o r y языка JavaScript. Это плохо и для посетителя. Ссылка Go Back (Перейти назад) на самом деле очень полезна.forward)) go(x) Переходит на х шагов вперед (положительhistory.1 перечислены некоторые другие методы для справки.

например. как JavaScript. хорошо было бы посмотреть на то. Чтобы избежать такой проблемы. Вместо выполнения внедренного скрипта. что изображено на рисунке 12. что считает все кодом на языке HTML. а присоединение заключается в создании отдельного файла. где точно начинается и заканчивается скрипт. Работа со скриптами и таблицами стилей Интернет больше не описывается только языком HTML. как показано в следующем примере: <script language="JavaScript"> function doAlert() { a l e r t ( " 1 am a s c r i p t . РНР и Cold Fusion. означает его включение в HTML-документ. Если вы уже попробовали некоторые инструментарии в данной книге. необходимо сказать браузеру. Внедрение материала означает его размещение в том же документе. чтобы сделать свои сайты более интерактивными и эстетичными. </script> . и мы получим нечто похожее на то. Определение Внедрение такого материала. Д.ГЛАВА 12. где находится HTML-код. Однако если подать браузеру текстовый документ или JavaScript-код. разработчики Web-сайтов полагаются на интерактивную мощь скриптов и управление стилями каскадных таблиц стилей (Cascading Style Sheets . Поместите скрипт между парой тегов s c r i p t . как код на языке HTML. [я соединения с базой данных. то заметили.или CSS-кода.CSS). " ) . содержащего скрипты или CSS-код. Такая ситуация наблюдае в я уже несколько лет. браузер посчитал его HTML-кодом и отобразил код на странице. Для кода на языке JavaScript и таблиц CSS есть два варианта: внедрение и присоединение. Присоединение означает сохранение материала в отдельном файле и его последующее связывание с Н TML -докумен том. Используя на Web-сайте так много дополнительного материала.1. Внедрение ckpunmoO Программа-браузер является глупой в том смысле. что в них широко используются язык JavaScript и таблицы CSS. как этот материал можно разместить. он попытается интерпретировать этот документ. например. ДДя этого и необходим тег s c r i p t . и последующем связывании HTML-кода с этим файлом. Подайте ему Web-страницу. и языки программирования сервера.. Даже если не принимать во внимание технологии. и все будет в порядке.

как браузер сгенерировал ее) находятся вверху HTML-кода. не заключив его в теги script. Работа со скриптами и таблицами стилей 93 В этом случае. что это HTML-код. что нужно пропустить все. изменяющие внешний вид страницы после того. Ответ зависит от того. что находится между тегами s c r i p t . как и скрипты. 12. */ </script> </head> <body> /* Содержимое страницы размещается здесь. браузер предположит. когда браузер транслирует HTML-код.ГЛАВА 12. которые могут вызываться на странице более чем один раз. Если внедрить скрипт. */ </body> </html> Скрипты для ролловерных изображений и открывающихся меню попадают в эту категорию. выполняющие проверку введенных данных. Рис. к какому типу принадлежит скрипт. Скрипты с повторяющимися или интерактивными функциями (функции. . Второй шаг заключается в определении. где разместить внедренный скрипт в HTML-коде. между тегами head и после тега t i t l e : <html> <head> <title>Page Title</title> <script language="JavaScript"> /* JavaScript-код размещается здесь. он знает.1. или функции. и отобразит его на странице Это первый шаг для внедрения скрипта.

—> <script /* language="JavaScript"> Здесь размещается скрипт. браузер интерпретирует таблицы CSS. где хотите отобразить результаты: <html> <head> <title>Page T i t l e < / t i t l e > </head> <body> <!— Вставка строки с датой вверху страницы. CSS-код размещается здесь. */ </script> <!— Здесь размещается оставшаяся часть страницы. */ </style> </head> <body> /* Содержимое страницы размещается здесь. */ </body> </h'tml> • Как и в случае с JavaScript-кодом. Они говорят браузеру рассматривать все. что находится между ними. как CSS-код. как в случае со специальным текстом или временно й меткой. внедрите скрипт прямо там. размещайте внедренные таблицы стилей в разделе HTML-кода head. . который выполняется только раз. а не HTML: <html> <head> <title>Page T i t l e < / t i t l e > < s t y l e type="text/css"> /* . как HTML-код. что и теги s c r i p t для JavaScript-кода.Строим Web-сайты 94 Однако если у вас есть скрипт. Теги s t y l e делают для таблиц CSS то же. если ему не указать иной способ. —> </body> </html> Внедрение таблиц стилей Как и в случае с кодом на языке JavaScript. вставляющий строку с датой. когда браузер первоначально генерирует страницу.

Работа со скриптами и таблицами стилей 95 Совет Некоторые старые браузеры не понимают теги script и style. Для этого используется атрибут s r c тега s c r i p t .js"> </script> </head> <body> < ! . который вы желаете присоединить. подобным образом: <html> <head> •<title>Page T i t l e < / t i t l e > < s c r i p t language="JavaScript" src=".Содержимое страницы размещается здесь. Такие браузеры рассматривают все.. необходимо сказать браузеру. получающего хоть какое-то удовольствие при посещении современных Web-сайтов с использованием такого антиквариата. наподобие гиперссылки. что находится между данными тегами. вы захотите поместить теги комментариев языка HTML до и после тегов script или s tyl e. как показано ниже: <script language="JavaScript"> </script> Добавление тегов комментариев предотвращает отображение старыми браузерами скриптов или кода в виде HTML-кода. -> </body> </html> Атрибут s r c задает путь от текущей страницы к файлу со скриптами. как текст. Присоединение скриптов Альтернативой внедрению является присоединение. где его искать./script/myscript. когда JavaScript-код размещается в отдельном файле. Хотя трудно представить посетителя. Однако чтобы на Web-странице можно было использовать внешний скрипт. . возможно.ГЛАВА 12.

Значение атрибута r e l описывает отношение связанного документа. который работает точно так же. За дополнительной информацией обратитесь к главе 42. Важно отметить. поэтому нельзя использовать тег s t y l e для присоединения внешней таблицы стилей. т. —> </body> </html> Совет Другой альтернативой является импортирование внешней таблицы стилей. Совет Тег link всегда должен размещаться в разделе head документа HTML Его невозможно разместить в каком-либо другом месте.Строим Web-сайты 96 Присоединение таблиц стилей Здесь есть маленькая хитрость. В нем указывается путь от текущей страницы к внешней таблице стилей. даже если между тегами не размещен никакой JavaScript-код. Тег l i n k является самодостаточным. У тега s t y l e нет атрибута src. Последние два атрибута не являются критически важными. для присоединения таблицы стилей на самом деле необходим только атрибут href. </link>.ess' "text/css"> rel="stylesheet" type= </head> <body> <!— Содержимое страницы размещается здесь. . У этого тега также нет атрибута src. однако эти атрибуты могут быть полезны для программного или аппаратного обеспечения. касающихся тега link. Вместо этого используется тег link: <html> <head> <title>Page T i t l e < / t i t l e > <link href="css/mystyles. а тег s c r i p t .нет. поэтому следует попытаться включить и их. однако есть атрибут hre f. Обратите внимание на пару вопросов. Это означает. а значение атрибута type сообщает тип таблицы стилей. читающего Web-страницу. находящейся в присоединенном документе.к. что для тега l i n k не требуется закрывающая версия. А с тегом l i n k такой проблемы не возникает. что после открытия тега s c r i p t его всегда необходимо стараться закрывать.

Несомненно. Работа со скриптами и таблицами стилей . что бесценно для часто используемых функций. 4-191 .ГЛАВА 12. для тех. 97^ Дневник: Внедрение или присоединение? В нашем распоряжении есть два метода: внедрение и присоединение. Мне это кажется пустой тратой времени. если в процессе разработки я захочу изменить что-либо. необходимо было бы проходить по всем экземплярам кода и вносить одинаковые исправления снова и снова. Если бы я попытался внедрить их. используемых по всему сайту. где требуются данные скрипты или таблица стилей. Браузер посетителя вынужден загружать внедренный код снова и снова в то время. а не внедрять. Вывод: внедрение отлично подходит для простых одноразовых функций и стилей. Более того. возможно. мне придется поправить это только в одном месте . ролловеров и всплывающих меню. если не сказать больше. консорциум W3C рекомендует присоединять код.в присоединяемом скрипте или таблице стилей. Если бы код был внедрен. Мне нравится присоединять скрипты и таблицы стилей. и стилей.присоединение. Этот подход позволяет использовать один и тот же файл со скриптами или таблицей стилей в любом желаемом количестве Web-страниц. когда присоединенные файлы браузер кэширует. будет использовано повторно. Какой из них лучше? Ответ . кто стремится к стандартизации. Еще одна пустая трата времени. что. мне бы пришлось копировать и вставлять одни и те же блоки кода снова и снова в каждую страницу. Для всего остального. И что даже более важно. например. присоединение является единственным разумным способом.

Даже сегодня навигация остается основным назначением гиперссылок. Вариантом являются кнопки HTML-формы. текстовые гиперссылки являются более привлекательными и скромными. запуск скриптов при помощи гиперссылок является рискованным делом из-за потенциальных проблем. Логическим выбором является что-либо.реагирует. Они хотят программные мини-решения. с технической точки зрения эта ссылка ведет куда-то. Также подходят и изображения. ведущей в никуда. Посетитель щелкнул на ссылке и перешел куда-то. они улучшат общий вид и впечатление от вашего интерфейса. на чем можно щелкнуть. Посетителю необходимо предоставить . Однако в Интернете посетители желают делать больше. что произойдем когда они щелкнут на ссылке. и они ни капли не похожи на грубые и отталкивающие кнопки HTML-формы. запускающие скрипты. чем просто переходить от одной страницы к другой. и присвоение результата событию ссылки onClick. это может очень просто сбить с толку ваших посетителей и рас строить их надежды относительно того. как отличать гиперссылки для запуска скриптов от гиперссьг лок для навигации. Если использовать гиперссылки. поэтому щелчок на этой ссылке аналогичен щелчку на кнопке Refresh (Обновить) браузера. С точки зрения удобства использования. то вскоре поймете. помогают посетителям понять. наподобие следующего кода: <а hrefj="#" onClick="doScript(). Когда вы приметесь разрабатывать такие типы интерфейсов. что похоже на гиперссылку. Вместо этого используйте другие ухищрения. который никогда не будет плохим. может не иметь ничего общего с навигацией. в правильном контексте. Подходят также и гиперссылки. чем большинство графических кнопок. что произойдет после щелчка на ссылке. Вместо этого может быть запущен скрипт. Если вы не решите. щелчок на том. Они хотят скрипты и другие интерактивные штучки. как текст ссылки и ее размещение относительно других элементов страницы. Одним из способов запуска скрипта является создание ссылки. что что-то на странице должно запускать все эти заказные функции. формирующий значение атрибута href. а гиперссылка . Такие факторы. Совет Поскольку гиперссылки для навигации и гиперссылки для запуска скриптов на странице выглядят одинаково.">Launch the'script</a> Ну хорошо. Запуск скриптов при помощи ссылок В старые добрые времена простая гиперссылка выполняла строго определенную задачу: навигацию.ГЛАВА 13. чтобы передать назначение ссылки вашим посетителям. Они хотят видеть функциональность. их нельзя отличить. Зачем нужна самоотносящаяся ссылка? Обычный HTML-текст не реагирует на событие onClick. Это было так просто. ссылается на текущую страницу. Когда вы бродите по Интернету. полагаясь только на внешний вид. возникающих на практике. Знак нумерации. похожие на кнопки. С другой стороны.

по существу. как безобидный компромисс. но почти во всех случаях количество таких посетителей мало. которые либо отключили поддержку языка JavaScript в своем браузере. Этот способ лучше для всех. Щелчок на самоотносящейся гиперссылке заставляет браузер перепрыгнуть обратно наверх страницы. Если вы действительно хотите оказать внимание пуристам языка HTML. . однако мы не хотим. так что посетители теряют текущее место в тексте. 99_ что-нибудь. чтобы найти ссылку. когда посетитель щелкнет на этой ссылке. Ссылка. реагирующие на события onC l i c k . " > L a u n c h the script</a> Выполнив это. не имеющим поддержки языка JavaScript. В качестве компромисса всегда можно использовать самоотносящиеся ссылки. обновляет страницу. Такие ссылки проще обрабатывать браузерам. не используйте язык JavaScript на своем сайте. Боюсь показаться бесчувственным. наподобие следующего кода: <а h r e f = " j a v a s c r i p t : d o S c r i p t ( ) . особенно если посетитель вынужден пролистывать страницу. однако она может доставить неудобства. или ссылки со словом j a v a s c r i p t в значении атрибута h r e f . вы избавитесь от самоотносящейся ссылки. JavaScript-ссылки для большинства посетителей работают лучше. Такая стратегия работает достаточно хорошо. но у вас появится проблема с перескакиванием браузера обратно наверх страницы. а не помогать. В противном случае браузер предположит. Запуск скриптов при помощи ссылок . на чем можно щелкнуть* поэтому указывается ссылка. Это будет мешать большей части ваших посетителей. Дневник: JavaScript-ссылки иди ondick-ссылки? JavaScript-ссылки. выглядит. что значение атрибута h r e f является путем к странице. либо совсем ее не имеют.ГЛАВА 13. Просто не забывайте указывать фразу j a v a s c r i p t : перед JavaScriptкодом в значении атрибута h r e f . которая. Однако если вы хотите иметь или вам необходима дополнительная функциональность. вызывают проблемы у посетителей. чтобы гиперссылка вела куда-либо. чем onClick-ссылки. поэтому браузер не будет перепрыгивать по странице. Лучшей альтернативой является указание скрипта в значении самого атрибута h r e f .

касающиеся макетов Создание макетов с фиксированной шириной при помощи таблиц Дневник: для создания макета использовать HTML-или CSS-код? Создание макетов с фиксированной шириной при помощи таблиц CSS Центрирование CSS-макетов с фиксированной шириной Создание текучих макетов при помощи таблиц Создание текучих макетов при помощи таблиц CSS Разделение изображений на срезы для макетных таблиц Создание многоколонных макетов при помощи таблиц Создание многоколонных макетов при помощи таблиц CSS Предотвращение разрыва навигационной панели Раскрашивание ячеек таблицы Раскрашивание и форматирование CSS-разделов Управление пространством дизайна в языке HTML Управление пространством дизайна при помощи таблиц CSS . Вопросы.ЧАСТЬ 2.

На рисунке 14. чтобы соответствовать ширине окна браузера. и браузеры стремятся выполнить враждебные действия по отношению к дизайну. чтобы умещаться по ширине окна браузера посетителя. В то же время фиксированная ширина означает фиксированную ширину независимо от того. требующих точного контроля над графическим дизайном. Нельзя ожидать от размещения визуальных элементов какой-либо точности. чтобы избегать их.com. однако делайте все возможное. Противоположностью макетам с фиксированной шириной являются текучие макеты и автоматически изменяющиеся макеты. Часто задаваемые вопросы Где я могу найти сайты. совпадает размер окна браузера с реальным размером страницы или значительно превышает его. когда текучий макет изменяет ширину страницы. Создание макетов с фиксированной шириной при помощи таблиц В макетах с фиксированной шириной используются абсолютные размеры в пикселах для определения ширины страницы. • Определение Макеты с фиксированной шириной используют абсолютные размеры в пикселах для определения ширины страницы. Объединения столбцов и строк отлично подходят для таблиц данных или таблиц. относятся nytim0s. Не создавайте слишком ухищренный дизайн. использующие макеты с фиксированной шириной? К известным сайтам. Таблицы макета. не соответствуют спецификации. Атрибуты c o l span и rowspan языка HTML позволяют строить чрезвычайно сложные таблицы. использующим макеты с фиксированной шириной. требующие точности фиксированной ширины. Разработка всех хороших макетов для Интернета начинается с эскиза. которые вы создаете здесь. похожего на представленный на рисунке 14.2. Макеты с фиксированной шириной являются единственным выбором для страниц. когда размеры окна браузера слишком велики по сравнению с размерами страницы. использующему объединение столбцов и строк. представляющих строки и столбцы данных в соответствии со спецификацией языка HTML.3.com и yahoo. на котором размечаются основные области страницы.1 продемонстрировано. которые автоматически изменяют свой размер.Глава 14. как макеты с фиксированной шириной могут одновременно выглядеть сдавленными и потерянными в межзвездном пространстве. Выравнивание макета с фиксированной шириной по центру сокращает этот эффект. Оба сайта укладывают огромное количество информации в тщательно разработанные макеты. . как показано на рисунке 14.

Строим Web-сайты 102 £t* Bew Favorites loots Рис. Страница с фиксированной шириной может выглядеть ужатой. если ее просматривать в окне браузера. Рис. Выравнивание макета с фиксированной шириной по центру улучшает положение вещей .2. * * Randy's New & Used Planets Content goes here Content goes here Content floes пега. i4.2. 14. ширина которого значительно превышает ширину страницы .

Вы просто выбираете ширину экрана. Довольно удобно. никак не назовешь авантюрным даже с натяжкой. однако в нижней ячейке основной таблицы вкладывается другая таблица. Определение Вложенная таблица .это таблица. который вы желаете построить. Вложенная таблица . 14. и пометьте области Определение Таблица данных . . который официально поддерживается языком HTML Использование таблиц для создания макетов. Это единственный тип таблиц. Как только набросок дизайна будет готов. вы должны начать думать о размерах в пикселах.3. Создание макетов при помощи таблиц 103 Logo Рис. хотя и чрезвычайно распространено.это таблица. которая размещается внутри ячейки другой таблицы. Пиксел является основной единицей измерений в HTML-таблицах. чтобы избежать объединения столбцов в верхней ячейке. представленный на рисунке 14. попытайтесь использовать вложенные таблицы. представляющая строки и столбцы данных. Дизайн.ГЛАВА 14.3. что операционные системы компьютеров измеряют ширину экрана также в пикселах.это таблица. который вмещается в таблицу аналогичных размеров. которая размещается внутри ячейки другой таблицы. противоречит правилам. которая имеет смысл для ваших посетителей. Если вы желаете получить более авантюрный дизайн. Начните с создания эскиза макета. а затем создаете макет. и это делает процесс задания размеров макета для конкретных настроек экрана безболезненной операцией.

консоли видеоигр. Это сообщит браузеру. Необходимо принимать во внимание элементы интерфейса браузера. не забывайте. В таблице 14. расположенных внутри таблицы. кухонные приспособления. которая будет соответствовать экрану ширине« 640 пикселов. рассчитать ширины областей. например. иногда упоминаемое как WebTV. что сумма отдельных ширин не больше (или не меньше) общей ширины таблицы. Можно заметить. откажитесь от больших размеров экрана. Исключением является приложение MSNTV. не имеющее полос прокрутки или других элементов интерфейса. что еще. Смотрите. . Сделайте свой наилучший выбор. можно будет изменить значения. телефоны. телевизоры. что не так уж и просто создать таблицу шириной 640 пикселов. поэтому от ширины таблицы отнимается несколько пикселов. например карманные компьютеры (PDA).1 приведены цифры. разрешение которых установлено в 1024 пикселов по ширине. Если ваш сайт обращается к беспроводной публике. для которого ширина таблицы составляет 760 пикселов.104 Строим Web-сайты Совет При создании дизайна устанавливайте значение атрибута ячеек valigne «top». которые съедают пространство дизайна. полосы прокрутки. 14. не составит труда. Иначе браузер будет центрировать содержимое по вертикали. когда мы знаем общую ширину таблицы. Позднее. Просто удостоверьтесь. наручные часы. Теперь. Распространенные ширины экрана и соответствующие им ширины таблицы Ширина экрана Ширина таблицы Комментарии 544 пикселов 544 пикселов Приложение WebTV/MSNTV 640 пикселов 600 пикселов Абсолютный минимум для большинства приложений 800 пикселов 760 пикселов Стандартный безопасный размер 1024 пикселов 955 пикселов Выходящий за рамки стандартного размер 1280 пикселов 1210 пикселов Не рекомендуется для универсальных сайте в 1600 пикселов 1530 пикселов Не рекомендуется для универсальных сайк в Совет И хотя в действительности многие бродят по Интернету с использованием настольных мониторов и экранов ноутбуков. что также существуют и другие типы устройств просмотра для Интернета.1. просто чтобы подстраховаться. и кто знает. что по вертикали содержимое необходимо выравнивать по верху ячеек. Табл. при необходимости. Для конечной цели данного примера не будем рисковать и выберем экран шириной 800 пикселов.

Листинг 14. как он делает это при отображении таблиц. и cellspacing в 0. как показано на рисунке 14. После определения ширины таблицы остальные значения становятся на свои места Совет Не забудьте установить значения атрибутов таблицы макета border.используя вложенные таблицы.1.4. —> <table width="760" border="0" cellpadding="O" cellspacing^' Q"> <tr> <td width="200" valign="top">Nav</td> . 760 рхLogo Рис. лите тег div здесь и в конце листинга. Замените метки в HTML-коде содержимым сайта . —> <table width="760" border="0" cellpadding="O" уда- cellspacing="O"> <tr> <td width="760" valign="top">Logo</td> </tr> <tr> <td width="760" valign="top"> <!— Вложенная таблица начинается здесь. и код таблицы практически напишет себя сам. В данном случае. 14. браузер не буcellpadding дет автоматически добавлять дополнительные промежутки. если необходим особый дизайн.105 ГЛАВА 14. Просмотр исходного кода для рисунка 14. .и у нас готов макет с фиксированной шириной.4.4 <div align="center"> <!— Если вы не желаете выравнивать таблицу макета по центру. Создание макетов при помощи таблиц Нанесите значения на эскиз.

-> <table width="760" border="0" cellpadding="O" cellspacing^' 0"> <tr> <td width="200" height="40-0" valign="top" >Nav</td> <td width="560" >Content</td> </tr> </table> height="400" valign="top" . вам придется обновить значение всего лишь одного атрибута width. размещенному в ячейках. если вы знаете их. Браузер автоматически изменяет высоты ячеек таблиц. что в этом примере не нужно заботиться о высоте ячеек таблиц. В данном случае. чтобы они соо гветствовали какому бы то ни было содержимому.Строим Web-сайты 106 <td width="560" valign="top">Content</td> </tr> </table> <!— Вложенная таблица заканчивается здесь. можно указать точные значения для высоты. Вот как мог бы выглядеть листинг после добавления нескольких значений для атрибутов height: <div align="center"> •stable width="760" border="0" cellpadding="O" cellspacing="O"> <tr> <td width="760" height="100" valign="top">Logo</td> </tr> <tr> <td width="7 60" height="400" valign="top"> <!— Вложенная таблица начинается здесь. Совет Если ширина ячейки таблицы равняется ширине самой таблицы. —> </td> </tr> </table> Обратите внимание. атрибут width ячейки таблицы можно опустить. но можно и просто не вмешиваться в ход событий и положиться на браузер в плане вычисления правильных значений для высоты. если вы измените свое мнение относительно ширины таблицы. На самом деле это является одним из преимуществ построения макетов с использованием таблиц. Безусловно.

Таблицы CSS уже некоторое время используются повсеместно. Его легко реализовать. Этот тип аргумента не является всего лишь придиркой к мелочам. Пока же макеты. . и он надежно работает на множестве различных типов браузеров. когда содержимое будет находиться в ячейках. не забудьте удалить атрибуты h e i g h t . или чтото очень похожее на них.или CSS-kog? Существует два основных подхода по созданию макетов на Web-странице: HTML-таблицы и каскадные таблицы стилей (Cascading Style Sheets .ГЛАВА 14. Однако использование HTML-таблиц для создания макета приводит все стандарты в беспорядок. Создание макетов при помощи таблиц 107 <!— Вложенная таблица заканчивается здесь.задача будет выполнена.CSS). кажется. Группы. может с большой легкостью ввести в заблуждение инвалидов по зрению. например. что в окне браузера таблица будет выглядеть полностью свернутой до тех пор. использующий таблицы. Для построения макета. при построении таблицы просто задайте атрибутам ячеек h e i g h t произвольные значения. является классическим. если бы браузеры выполняли совместные действия в отношении их. однако ни один из них не поддерживает таблицы CSS полностью и без существенных несогласованностей. Альтернативный подход с использованием CSS-кода следует стандартам буквально. Дневник: для создания макета использовать HTML. и читатели экрана полагаются на точные интерпретации стандартов языка HTML. основанные на использовании таблиц. поэтому ваш макет. Netscape и Opera достаточно хорошо поддерживают таблицы CSS. поскольку использование тегов t a b l e языка HTML предполагается для строк и столбцов данных. и. Если вы считаете это ошибкой. наподобие консорциума World Wide Web (W3C). когда таблицы используются подобным образом. удовлетворяя даже самых привередливых членов консорциума W3C. требуется больше усилий и больше времени для тестирования. Таблицы стилей не были бы такими неудачными. преобразователи текстречь. выбор очевиден: используйте таблицы. ненавидят. доминируют в Интернете. —> </td> </tr> </table> Обратной стороной отказа от использования атрибутов h e i g h t является то. однако потом. Подход. на которую рассчитывали молот или шуруп. Средства специальных возможностей. пока вы не начнете добавлять содержимое в ячейки. основанного на таблицах CSS. Однако если вы заботитесь о стандартах и проблемах доступности людям с ограниченными возможностями и смотрите в будущее. таблицы CSS . макеты. Самые последние версии браузеров Internet Explorer. Однако несмотря на эти ограничения. основанные на таблицах CSS. Использование таблиц для графического дизайна напоминает использование молота для вбивания шурупа . являются будущим графического дизайна в Интернете. что данный подход наилучшим образом работает для простых дизайнов. но до сих пор они являются «созревающей» технологией. однако это не та задача.это ваш выбор. Если вы пытаетесь охватить максимально возможное количество посетителей. в основе которого лежат таблицы.

Снова обращаем внимание. В главе 14 описывается. Каждый раздел может иметь свои собственные свойства CSS-стиля. кто только что присоединился к нам. как добиться того же результата при помощи каскадных таблиц спелей (Cascading Style Sheets . Если же вы хотите выровнять макет. Создание макетов с фиксированной шириной при помощи таблиц CSS Для тех. как создавать макеты с фиксированной шириной при помощи таблиц. основанными на таблицах. составляющие страницу. называемых разделителями (divs). что макет с фиксированной шириной использует абсолютные размеры для определения ширины страницы. как части мозаики. вы снова и снова будете читать о том. по центру. Он размечает область ИЛИ раздел Web-страницы. В этой главе показано. как следует всегда создавать дизайн с испольк ванием вложенных таблиц. и это дает более высокий уровень управления графическим дизайном. посвященную макетам. Как и в случае с макетами. поскольку при использовании таблиц CSS необходимость во вложенных таблицах отпадает. а затем эти элементы выкладываются на Web-странице. как показано на рисунке 15. В этой главе вы не найдете таких советов. основанным на таблицах. напомним. которые в любом случае стремятся видеть мир в фигурах. чем таблицы языка HTML. выровненный по левой стороне окна браузера. Вместо этого макет делится на ряд прямоугольных областей.1. Совет В результате выполнения данной процедуры вы получите макет с фиксированной шириной. Если в этой книге взять любую главу. разработка макетов.ГЛАВА 15. Определение Тег di v языка HTML обозначает раздел (division). Каждая область дизайна разрабатывается по отдельности с использованием тегов d i v языка HTML. Мыслить в понятиях прямоугольников являет^ ся абсолютно естественным для людей со зрительными способностями. начинается с эскизов. Необходимо просто определить различные прямоугольные области.CSS). или разделами. . основанных на таблицах CSS. В этом смысле таблицы CSS более ориентированы на графику. основанный на таблицах CSS. сразу перейдите к главе 16. что при работе с таблицами CSS не нужно думать о вложенных таблицах.

который можно было бы использовать при построении таблицы. He называйте данные прямоугольники ячейками таблицы. Один для области Nav (Навигация) шириной 200 пикселов. width: 760px. 3. Три прямоугольника подразумевают три элемента раздела. width: 560px.ГЛАВА 15. Один для области Logo (Логотип) шириной 760 пикселов. что находится внутри атрибута s t y l e ."> Content Значения атрибута s t y l e данных тегов задают ширину в CSS-формате. Это означает следующее: . Они являются разделами Для создания этого макета потребуется три прямоугольника: 1. для всего."> Nav <div id="content" style="position: absolute. width: 200px. Один для области Content (Содержимое) шириной 560 пикселов. Вот они: <div id="logo" s t y l e = " p o s i t i o n : a b s o l u t e . Важно помнить о необходимости использования CSS-формата. Создание макетов при помощи таблиц CSS 109 760 рх Logo Nav Main Content Area 200 px 560 px Рис.1. 15. вместо HTML-формата. а не в виде width= "760"."> Logo <div id="nav" style="position: absolute. 2.

width: 760px. как показано на рисунке 15. поэтом}' у него нет смещения сверху или слева: <div id="logo" s t y l e = " p o s i t i o n : l e f t : 0px. код выглядит так: <div id="nav" style="position: absolute. Следовательно. что высота изображения составляет 100 пикселов."> absolute. Совет Перед вычислением смещений сверху и слева для ваших разделов. а не 5 60 или 5 60 рх. и вы знаете. поэтому у него нет смещения слева. Для этого расположение элементов выражается через смещение от левой и верхней сторон окна браузера. Разделяйте составные имена атрибутов дефисом. l e f t : Opx. Разделяйте пары атрибут/значение символом точки с запятой (. backgroundcolor. смещение будет составлять 100 пикселов. t o p : Opx. следует вернуться обратно к разделу Logo (Логотип) и жестко закодировать значение атрибута height: <div id="logo" s t y l e = " p o s i t i o n : ЮОрх. но как насчет смещения сверху? Здесь необходимо что-то )тсазать.). например. Разместить первый элемент раздела не составит труда: он начинается в левом верхнем углу. что вы планируете вставить графический логотип в первый раздел."> absolute. Внесение данных изменений улучшает согласованность вашего дизайна в различных браузерах. topmargin. Если помните. что не предусмотрено вашим дизайном. marginv/idth и marginheight в 0. теги div представляют разделы или области страницы. а не знак равно (=)."> Nav Для обеспечения согласованности и очень четкого разъяснения всего для браузеров. которые по умолчанию устайавливают различные значения для пространств полей страницы. t o p : ЮОрх. критично относящихся к таблицам CSS. а не backgroundcolor или background_color. например. height: .2. Всегда указывайте единицу измерения после числового значения и не вставляйте пробел между числом и единицей измерения.Строим Web-сайты 110 Используйте символ двоеточия (:). окажите себе любезность и установите значения атрибутов leftmargin. left: Opx. width: 2 0 Орх. t o p : Opx: Logo Второй элемент раздела начинается слева. width: 760px. Если второй раздел начинается прямо под логотипом. 56Орх. Эти атрибуты принадлежат тегу body. Иначе второй раздел частично перекроет первый раздел. Следующим шагом является их размещение на странице. Предположим. для задания пар атрибут/значение.

Всегда можно выбрать произвольное значение и уточнить его позднее Инструментарий Макет с фиксированной шириной.2. с любой комбинацией следующих элементов: баннер. <body leftmargin= 'О" topmargin="0" marginwidth="O' marginheight="0"> <!— Добавьте следующий тег div. чтобы не закрывать область Nav (Навигация): <div i d = " c o n t e n t " s t y l e = " p o s i t i o n : ЮОрх. Создание макетов при помощи таблиц CSS 111 Logo Для третьего элемента раздела необходимо смещение сверху."> absolute. левый столбец. —> . и смещение слева. равное 100 пикселам. top: Content 760 px т ЮОрх Logo T Nav 200 px Main Content Area 560 px Рис. средний столбец и правый столбец. если хотите. чтобы по всему верху макета располагался баннер. необходимо вычислить высоту элемента Logo (Логотип). построенный при помощи CSS-кода Данный инструментарий предоставляет макет с фиксированной шириной. l e f t : 200px. чтобы не закрывать область Logo (Логотип). Поскольку размещение каждого элемента раздела осуществляется в соответствии со смещениями сверху и слева.ГЛАВА 15. 15. построенный при помощи CSS-кода. width: 560px. равное 200 пикселам.

—> <!— Следующий тег div определяет основную област для содержимого страницы. —> </body> . right: rightwidthpx. top: bannerheightpx. width: designwidthpx. top: bannerheightpx. left: leftwidthpx.">3десь размещается содержимое <!— Окончание тега div баннера —> <!— Добавьте следующий тег div. которые вам не нужны.Строим Web-сайты 112 <div id="banner" style="position: absolute. —> <div id="middlecol" style="position: absolute. если хотите иметь правый столбец. И снова. замените ниже выражение bannerheight значением 0. top: bannerheightpx. Замените нулями значе ния."> Здесь размещается содержимое <!— Окончание тега div среднего столбца."> Здесь размещается содержимое <!— Окончание тега div левого столбца. — >• <div id="leftcol" style="position: absolute. width: rightwidthpx. -> <div id="rightcol" style="position: absolute. замените выражение bannerheight значением 0. width: leftwidthpx. left: Opx. Если вы не используете баннер. width: middlewidthpx. right : Opx. —> <!— Добавьте следующий тег div. height: bannerheightpx. top: Opx."> Здесь размещается содержимое <!— Окончание тега div правого столбца. если вы' не используете баннер. left: Орх. если хотите иметь левый столбец.

который расположен внутри другого раздела. также известных как вложенные разделы.это элемент раздела внутри другого раздела. использующий вложенные слои.1. 16. Вложенные внутри него слои представляют содержимое сайта. Для построения CSS-макета. В данном сценарии основной раздел является контейнером. . Вложенный слой . а затем отцентрируйте контейнер Для этого макета требуется четыре вложенных раздела: 1. Центрирование CSS-макетов с фиксированной шириной Хороший метод для центрирования CSS-макетов с фиксированной шириной заключается в использовании вложенных слоев. Один для области Logo (Логотип) шириной 760 пикселов. Определение Вложенный слой. как вложенные таблицы . 4 760 px I 100 px Logo Nav 200 px Main Content Area 400 px Links -160px- Puc. На рисунке 16.ГЛАВА 16. точно так же. 2. используйте контейнерный элемент. . или вложенный раздел.1 показан типичный CSS-макет. выровненного по центру. в котором будут размещаться вложенные элементы с содержимым.это таблицы внутри таблиц. Один для области Nav (Навигация) шириной 200 пикселов.это элемент раздела.

1. Один для области Links (Ссылки) шириной 160 пикселов.Строим Web-сайты 114 3."> Обратите внимание. поскольку мы не знаем наверняка ширину окна браузера посетителя. 16. смещение слева контейнерного элемента всегда равняется половине его ширины. Распространенные ширины контейнерного элемента и соответствующие смещения слева Ширина экрана Ширина контейнерног о элемента Смещение слева для центрирования 640 пикселов 600 пикселов 300 пикселов 800 пикселов 760 пикселов 380 пикселов 1024 пикселов 954 пикселов 477 пикселов 1280 пикселов 1210 пикселов 605 пикселов 1600 пикселов 1530 пикселов 765 пикселов . 4. Хитрость данного метода заключается в установке левого края страницы на центральную точку окна браузера. По существу нужно найти центр страницы и сместиться на половину ширины макета в одну сторону. width: 760px."> relative. в таблице 16. Один для области Content (Содержимое) шириной 400 пикселов. Однако если у вас нет времени для вычислений. При использовании данного метода. что исцользуется значение. а не абсолютным. Используйте этот код: <div i d = " c o n t a i n e r " s t y l e = " p o s i t i o n : -380px. который будет содержать четыре перечисленных раздела. Почему 380 пикселов? Потому что 380 .это половина от числа 760.l e f t : 50%. и на то есть причина. Табл. Поскольку положение контейнерного элемента является относительным. браузер использует смещение слева немного по-другому. В результате мы получим идеально отцентрированный контейнерный элемент. Использование здесь процентного отношения является разумным решением. когда левый край страницы начинается в центре окна браузера. left: Смещение слева выражается отрицательным значением.1 приведены готовые значения. а не абсолютный размер. вычитая 380 пикселов от позиции левого края страницы. Также необходим контейнерный элемент. Теперь. выраженное в процентах. что достигается добавлением атрибута s t y l e к тегу body страницы: <body s t y l e = " m a r g i n . выраженный в пикселах. необходимо выразить положение контейнерного элемента относительно этого края. которое является общей шириной макета.

Отрицательное смещение слева задано относительно левого края страницы."> Content . r g i n . контейнерный элемент. —> <div id="container" left: -380px. однако поскольку они являются вложенными."> style="position: relative. top: Opx."> Logo <div id="nav" style="position: absolute. "> <!— Атрибут style перемещает левый край страницы на центр окна браузера."> Nav <div id="content" style="position: absolute. как элементы в главе 15. Центрирование CSS-макетов с фиксированной шириной 115 Вложенные элементы выглядят так же. —> <!— Это контейнерный элемент. —> </body> . а не левый верхний угол окна браузера.в данном случае. Их положение является абсолютным.в качестве базисной точки для вычисления смещений слева и сверху. Вот исходный код для готового макета: <body s t y l e = " m a . . —> <!— Предыдущая строка закрывает контейнерный элемент. left: 200px. <div id="links" style="position: absolute. —> <div id="logo" style="position: absolute. width: 760px. width: 200px. left: 0px. top: lOOpx.ГЛАВА 16. left: 0px. <! — Здесь идут вложенные элементы. top: lOOpx. определенного в теге body. left: 600px."> Links <!— Перечисление вложенных элементов закончено.l e f t : 50%. width: 400px. width: 760px. браузер использует их родительский элемент . top: lOOpx. width: 160px. и его значение равняется половине ширины.

которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя. даже в случае с текучим макетом. Посетители. имеющие большие мониторы и профессиональные видеокарты. что и жизнь макетов с фиксированной шириной. например. которые предпочитает конкретный посетитель. просматривающие страницы в окнах браузера. Оба сайта содержат большое количество информации и имеют простой (можно даже сказать. использующие текучие макеты? Известные сайты. Очевидное преимущество текучих макетов заключается в использовании всей доступной реальной площади экрана. включают Amazon и большую часть eBay. скажем. посетители. скучный) графический дизайн. как иногда выглядят макеты с фиксированной шириной. которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя. макеты . что при создании текучего макета вы разрабатываете таблицу. Управление графическим дизайном в текучих макетах является гораздо более трудоемкой операцией. в каком именно пикселе появится конкретный элемент. что вы знаете. а посетители с особыми требованиями вряд ли нарушат ваш макет.макетами с фиксированной шириной. Это означает.это макеты.ГЛАВА 17. независимо от размеров окна браузера. 600 пикселов. 600 пикселов или 760 пикселов. или автоматически изменяющиеся. Определение Текучие.это макеты. Более того. Сравните текучие макеты с их противоположностью . использующие текучие макеты. установив разме р шрифта браузера в значение Largest (Самый крупный). благодаря чему они выглядят более изящно. Жизнь текучих макетов начинается с того же. или автоматически изменяющиеся. Создание текучих макетоб при помощи таблиц Текучие. Текучие макеты не выглядят слишком сдавленными при просмотре в очень узких окнах браузера. благодаря которой макет умещается в окне браузера определенной минимальной ширины. . макеты . Что толку от того. могут максимизировать окна браузера и увидеть больше информации на сайте без необходимости прокрутки. увидят крайне непривлекательные горизонтальные полосы прокрутки. если ширина области дизайна изменяется при изменении ширины окна браузера? Часто задаваемые вопросы Где я могу найти сайты. ширина которых меньше минимальной ширины макета. использующими абсолютные размеры.

чтобы они появились. • 600 рх- Links Logo -200 рхNav -400 рхContent 150 рх - 1 More Links . заставляет браузер вычислять ширину области дизайна. при увеличении таблицы браузер посетителя осмелится вставить промежутки везде. Никогда не используйте объединение столбцов или строк для получения сложного дизайна. Использование этой общей ширины. учитывая ширину окна браузера. ни при каких обстоятельствах. не используйте атрибуты rowspan или c o l s p a n в текучем дизайне. которое в языке HTML служит сокращением слова любой.300 рх - -100 рх- Рис. Создание текучих макетов при помощи таблиц Если вам не нужно ничего. вместо фиксированного значения в пикселах. дизайна с фиксированной шириной и поддерживайте его таким. Для создания эффекта текучести нужно очень аккуратно присвоить параметру w i d t h определенных ячеек таблиц символ звездочки (*). Итак. —> <table width="600" ing^' 0"> <tr> border="0" cellpadding="O" cellspac- . состоящей из двух ячеек. В данном макете используются две вложенные таблицы внутри контейнерной.1. 17.117 ГЛАВА 17. когда пригодится план и один или два эскиза. наподобие представленного на рисунке 17. где вы не хотите. Просмотр исходного кода для рисунка 17. что очень важно. особенно в тех местах. кроме макета с фиксированной шириной. Можно добиться такого же результата при помощи одной таблицы. используя атрибут c o l s p a n . Вместо этого используйте вложенные таблицы Листинг 17. Обратите внимание на простоту макета. остановитесь здесь. однако мы не хотим делать это в данном случае. Если вы используете эти атрибуты. Начните с исходного. ширина (параметр w i d t h ) каких ячеек таблиц устанавливается любой? Это как раз тот случай. Однако для текучего макета еще не все готово. Никогда.1. Начните с исходного дизайна с фиксированной шириной.1 <table width="600" border="0" cellpadding="O" cellspacing="O"> <tr> <td> <!— Первая вложенная таблица начинается здесь. Отсюда и текучесть.1.

необходимо решить. как показано на рисунке 17. —> </td> </tr> <tr> <td> <!— Вторая вложенная таблица начинается здесь. Не пытайтесь сделать две текучих ячейки в одной и той же строке. основанных на пикселах. если таблица состоит из более. Более того. В первой вложенной таблице хорошим выбором является ячейка Links (Ссылки). даже . чем одной строки. Чтобы увеличить таблицу. равной 600 пикселам. поэтому она уютно помещается в максимизированном окне браузера на экране шириной 640 пикселов./table> Данная таблица имеет ширину в 600 пикселов. —> <table width="600" ing="0"> border="0" cellpadding="O" cellspac- <tr> <td width="150">Nav</td> <td width="350">Content</td> <td'width="100">More links</td> </tr> </table> <!— Вторая вложенная таблица заканчивается здесь.Строим Web-сайты 118 <td width="200">Logb</td> <td width="400">Links</td> </tr> </table> <i— Первая вложенная таблица заканчивается здесь.2. Совет При использовании данного метода создания текучести. Также установим значение атрибута w i d t h для всей таблицы в 100%. —> '</td> ~ </tr> . на относительные. которая будет иметь переменную ширину. поэтому ее атрибуту w i d t h присвоим символ звездочки. соответствующая ячейка в каждой строке также должна быть текучей. ширина таблицы останется фиксированной. значения атрибутов w i d t h каких ячеек таблиц сменить с абсолютных. Если этого не сделать. Однако она выглядит слишком сжатой в окнах браузеров с большими размерами на более широких экранах. выбирайте одну и только одну ячейку в строке таблицы. основанные на процентах.

как показано на рисунке 17. будут иметь управляемые ширины. Совет Хорошее правило выбора текучей ячейки заключается в выборе ячейки с наибольшим количеством содержимого. Просмотр исходного кода для рисунка 17. 17.2. и добавит свободное место внутри ячейки Logo (Логотип). однако ячейка Links (Ссылки) увеличится и будет соответствовать ширине окна браузера. 600 рх Links Logo -200 рх- Nav Content 150 рх- More Links • 300 рх - -100 рх - Рис. В первой вложенной таблице ячейка Links (Ссылки) является хорошим выбором для использования переменной ширины Листинг 17.ГЛАВА 17.2. а значение атрибута width вложенной таблицы установите равным 100%. Создание текучих макетов при помощи таблиц 119 и с текучей ячейкой. находящиеся по обе стороны от ячейки Content (Содержимое).3. что может разбалансировать макет. Если вместо этого увеличить ячейку Logo (Логотип).) В этом случае ширина ячейки Logo (Логотип) не станет больше.2 <table width="100%" border="0" cellpadding="O" cellspacing="O"> <tr> <td width="200">Logo</td> <td width="*">Links</td> </tr> :/table> Во второй вложенной таблице ячейка Content (Содержимое) является наилучшим выбором для использования относительной ширины. при этом позволяя содержимому страницы заполнять окно браузера естественным образом. равную 400 пикселам. . Поэтому установите символ звездочки для атрибута width ячейки Content (Содержимое). Ячейки. браузер сохранит ширину ячейки Links (Ссылки). чем 200 пикселов.

.4 показан завершенный эскиз макета. чтобы увеличить ее ширину до ширины окна браузера.3. 17. Просмотр исходного кода для рисунка 17. Во второй вложенной таблице выберите ячейку Content (Содержимое) в качестве ячейки с переменной шириной Листинг 17.3 <table width="100%" border="0" cellpaddi:ng="O" cellspacing="O"> <tr> <td width="150">Nav</td> <td width="*">Content</td> <td width="100">More links</td> </tr> </table> 100% Logo Links -200 px- Nav Content • 150 px —>• -* More Links *. 17.3.600 рх Logo Links -200 рхContent Nav More Links -150 рх • >. Установите параметр width контейнерной таблицы в значение 100%. На рисунке 17.120 Строим Web-сайты Теперь просто установите значение атрибута width контейнерной таблицы в 100%.•*-100 px - Рис.-*• 100 рх - Рис.4. и все готово. и ваш макет станет текучим .

—> </td> </tr> </table> . Просмотр исходного кода для рисунка 17. —> </td> </tr> .ГЛАВА 17.4 <table width="100%" border="0" cellpadding="O" cellspacing="O"> • <tr> <td> <!— Первая вложенная таблица начинается здесь. Создание текучих макетов при помощи таблиц 121 Листинг 17. —> <table width="100%" border="0" cellpadding="O" cellspacing="0"> <tr> <td width="150">Nav</td> <td width="*">Content</td> ' <td width="100">More links</td> </tr> </table> <!— Вторая вложенная таблица заканчивается здесв. —> <table ing="0"> width="100%" border="0" cellpadding="O" cellspac- <tr> <td width="2 00">Logo</td> <td width="*">Links</td> </tr> </table> <!— Первая вложенная таблица заканчивается здесв.• <tr> <td> <!— Вторая вложенная таблица начинается здесв.4.

какие разделы будут текучими. или автоматически изменяющиеся. • Если справа или слева от раздела расположены другие элементы . поскольку сама таблица имела бы ширину.раздел не растягивается на все окно браузера . что раздел Content (Содержимое) должен быть текучим. marginheight и marginwi dth тега body в значение 0. что не существует одного единственного решения для создания эффекта текучести. . Если вы желаете. Просто разделите дизайн на прямоугольные области. равную 100%. В таблицах CSS такого сокращения нет. это необходимо явно указать в CSS-коде. Предположим. Каждая из этих областей станет элементом раздела в HTML-коде. но как насчет раздела Logo (Логотип)? Если бы этот макет строился с использованием таблиц.2. которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя. эффект текучести создается посредством присвоения атрибуту раздела w i d t h значения 100%. как показано на рисунке 18. чтобы раздел Content (Содержимое) увеличивался и уменьшался. Поэтому добавьте раздел Logo (Логотип) к все еще небольшому списку текучих элементов и разметьте эскиз. текучие. поэтому не беспокойтесь об этом. Совет Как и в случае с CSS-макетами с фиксированной шириной.ГЛАВА 18.это макеты. Для CSS-макетов не требуется использование вложенных таблиц. Однако если в предыдущей главе рассматривались текучие макеты. нам не нужно было бы обязательно устанавливать значение атрибута w i d t h верхней ячейки. как создавать текучие макеты с использованием каскадных таблиц стилей (Cascading Style Sheets-CSS). 200 пикселов для раздела Nav (Навигация) и 150 пикселов для раздела Links (Ссылки). Начните работу с создания эскиза макета. Создание текучих макетов при помощи таблиц CSS Как следует из главы 17. что мы хотим. равным 100%. созданные при помощи таблиц. макеты .1. Необходимо использовать различные методы в зависимости от положения раздела в макете: • Если раздел растягивается вдоль всей ширины окна браузера. вам нужно установить атрибуты leftmargin. наподобие представленного на рисунке 18. скажем.не присваивайте значение атрибуту раздела w i d t h . чтобы математические расчеты корректно согласовывались между разными браузерами. чтобы раздел Logo (Логотип) растянулся вдоль всей ширины окна браузера. На следующем шаге необходимо решить. topmargin. но при этом левая и правая боковые панели имели фиксированную ширину. Очевидно. Одной из наименее желанных особенностей CSS-макетов является то. то в этой главе демонстрируется. и браузер изменил бы размеры ячейки Logo (Логотип) для полного соответствия ширине таблицы.

нам бы не пришлось этого делать Раздел Logo (Логотип) растягивается вдоль всей ширины браузера. 18."> Logo absolute. t o p : Opx. 18. l e f t : 0px. Его код выглядит следующим образом: <di'v id="logo" s t y l e = " p o s i t i o n : lOOpx. height: . Поскольку мы имеем дело с таблицами CSS. width: 100%. поэтому этот элемент попадает в первую категорию. Создание текучих макетов при помощи таблиц CSS 123 Logo Nav Main Content Area Links Рис.1. Этот макет несложно создать при помощи таблиц CSS. от левой стороны до правой стороны. в этом макете необходимо сделать текучим раздел Logo (Логотип). Если бы мы создавали таблицу. Но как его сделать текучим? 100% Logo Nav Main Content Area Links Рис.ГЛАВА 18.2.

что он не перекроет области навигационной панели и ссылок. r i g h t : 150px ."> 150px. Теперь код для раздела Content (Содержимое): <div i d = " c o n t e n t " s t y l e = " p o s i t i o n : 20Opx. чтобы цвет фона страницы проступил через пространство между разделами. Этот особый кусочек кода размещает элемент рядом с правой стороной экрана. в первую очередь. left: Content Поскольку данный раздел находится между левой и правой боковыми панелями. top: Links В значение атрибута s t y l e раздела Links (Ссылки). . width: lOOpx. однако располагаем его на расстоянии 200 пикселов от левой стороны окна браузера и на расстоянии 150 пикселов от правой стороны. что находится в основной области содержимого. и мы не хотим. чтобы основная область с содержимым имела такой же цвет фона. созданный с использованием таблиц CSS. Раздел Content (Содержимое) может не прилегать точно к правому столбцу в зависимости от того. необходимо сделать так. t o p : lOOpx. top: lOOpx. Совет ЕСЛИ ВЫ назначаете разделам фоновые цвета. швов дизайна. "> absolute. Вот и он: текучий макет. как и страница. Атрибут s t y l e необходимо определять именно таким способом. right: Opx. он попадает во вторую категорию. Nav <div id="links" style="position: absolute. width: 200px."> absolute. На рисунке 18.124 Строим Web-сайты Разделы для навигационной панели и ссылок являются обычными элементами с фи ксированной шириной: <div id="nav" s t y l e = " p o s i t i o n : l e f t : Opx. в текучих макетах. так сказать.3 показан завершенный эскиз макета. являющаяся самой главной. поскольку мы не знаем. Мы не задаем значение атрибута width. Это предотвратит отображение браузером. включена пара r i g h t : Opx. какую ширину будет иметь область Content (Содержимое). Почему? Чтобы гарантировать. помимо всего прочего.

замените ниже выражение bannerheight значением 0 . чтобы по всему верху макета располагался баннер. или задайте значение в процентах для текучего столбца. Если вы не используете баннер. absolute. создаваемого при помощи таблиц CSS Инструментарий Создание текущего макета при помощи таблиц CSS Данный инструментарий демонстрирует. h e i g h t : l e f t : 0px. левый столбец. если хотите иметь левый столбец. 18. Здесь располагается содержание <!— Окончание тега d i v баннера. чтобы получить столбец с фиксированной шириной.3. как создавать текучий CSS-макет с любой комбинацией следующих элементов: баннер. left: .ГЛАВА 18. —> <!— Добавьте следующий тег d i v . top: bannerheightpx."> style="position: bannerheightpx. —> <div width: Opx. leftwidth. если хотите. Завершенный эскиз для текучего макета. <body leftmargin="0" topmargin="0" height="0" marginwidth="O"> margin- <!— Добавьте следующий тег d i v . Создание текучих макетов при помощи таблиц CSS 125 100% т ЮОрх Logo Nav Main Content Area 200 px Links -150 px- 100% Рис. —> <div id="banner" width: 100%. Используйте значение в пикселах для атрибута width. t o p : Opx. средний столбец и правый столбец."> id="leftcol" style="position: absolute.

left: leftwidth. —> </body> . Значение. top: bannerheightpx. Замените нулями значения.126 Строим Web-сайты Здесь располагается содержание <!— Окончание тега div левого столбца. —> <div id="middlecol" style="position: absolute. width: rightwidth. —> <!— Добавьте следующий гег div. которые вам не нужны. " > Здесь располагается содержание <!— Окончание тега div правого столбца. right: rightwidth. сделает правый столбец текучим. top: bannerheightpx. —> <div id="rightcol" style="position: absolute."> Здесь располагается содержание <!— Окончание тега div среднего столбца. —> <!— Следующий тег div определяет текучий столбец для основного содержимого страницы. Как и в случае с тегом div левого столбца. выраженное в процентах. можно использовать абсолютное значение в пикселах или в процентах. right: Opx. если хотите иметь правый столбец.

как показано на рисунке 19. например. необходимо знать кое-что о создании макетных таблиц трудным способом. Разделение изображении на срезы для макетных таблиц Популярным методом создания Web-макетов является метод разделения на срезы.1. основанные на различных частях страницы. как показано на рисунке 19. показанные на рисунке 19. обученных графическому дизайну: разработка ведется в полностью визуальной среде.1. выходящее за границы таблицы. после чего полученный макет разрезается на кусочки или срезы. получилось при разделении на срезы рисунка 19. почти наверняка у вас появятся проблемы при добавлении содержимого к макету в HTML-редакторе. а затем разделите на срезы и экспортируйте эти макеты по отдельности. При экспортировании срезов в виде отдельных графических файлов вы получаете HTML-таблицу.это метод создания макетных таблиц в графических приложениях. В этой книге заведено предостерегать вас от дурной привычки использовать объединение столбцов и строк в макетных таблицах. а не с графического файла. на отдельные графические файлы.ГЛАВА 19. Это является отличным решением для людей. как. Содержимое. и приложение для работы с графикой генерирует HTML-таблицу. это . кстати. не являются исключением. которая снова собирает полученные кусочки в Web-браузере. полученные из разрезанных графических файлов. Macromedia Fireworks. Чтобы выполнить работу по разделению на срезы в практическом смысле.2. как на рисунке 19. При использовании данного метода макет разрабатывается в виде графического файла в таких приложениях. Adobe Photoshop или Adobe ImageReady. Если в результате разделения на срезы получена макетная таблица. и нет необходимости самому выполнять какое-либо кодирование. и макетные таблицы. начиная с языка HTML. Разделите исходные срезы. . В данном случае вы получите четыре отдельных макетных таблицы для четырех областей страницы.теория. Избежать использования объединения столбцов и рядов достаточно легко. использующая объединения столбцов или строк (что. По крайней мере. Fireworks и Photoshop. Сначала макет разрабатывается в графическом редакторе. Определение Разделение на срезы . заставляет макет некрасиво разрываться. Затем файл буквально разделяется на кусочки для различных частей страницы. которая снова собирает полученные кусочки в Web-браузере. например.1).3. если каждую область страницы разделять на срезы поодиночке.

которая снова собирает полученные срезы в Web-браузере File Edit View Favwltes Ioois Рис. например.2. 19. 19.Строим Web-сайты 128 600x«80 100% - Puc. Макетная таблица использует объединения столбцов и строк. Есть проблема. В результате разделения макета на срезы в графическом приложении. поэтому макет может быть легко разорван при работе с ним в редакторе . получаются отдельные графические файлы и HTML-таблица. Macromedia Fireworks.1.

3.ГЛАВА 19.закатать рукава. как показано на рисунке 19. чтобы избежать объединения столбцов. Создайте эскиз контейнерной таблицы. чтобы избежать объединения строк. используя несколько вложенных таблиц. разделите области макета на отдельные графические файлы. а в правой ячейке вложенной таблицы необходимо использовать еще одну вложенную таблицу.4. 19. Создайте полный эскиз макета. 29. а затем по отдельности разделите на срезы каждый графический файл Как теперь обратно собрать области вместе? Наилучший способ . что в нижней ячейке контейнерной таблицы необходимо использовать вложенную таблицу. Обратите внимание. Чтобы избежать использования объединений столбцов и строк. D?-l* : Л » 129 S i W * ШМ» Ш Рмс. и постройте эту таблицу в HTML-редакторе . -* 600 рх - *- Тор Nav Main Content Area -*-125рх—»- -475px *- Footer Рис. Разделение изображений на срезы для макетных таблиц 1»™.4. чтобы избежать объединения столбцов и строк. запустить HTML-редактор и создать контейнерную таблицу вручную.

— > •ctable width="47 5" ".- <!— Окончание второй вложенной таблицы. — > <table width="125" b o r d e r = " 0 " ing= " 0 " > cellpadding="O" cellspac- <tr> <td>Nav</td> <td> <!— Начало в т о р о й в л о ж е н н о й т а б л и ц ы .Строим Web-сайты 130 Листинг 19. i • •• . -> ' </td> </tr> </table> <!— Окончание первой вложенной таблицы.Dorder="0" cellspacing="O"> • cellpadding="C" <tr> <td>Main Conten t Area</td> </tr> <tr> <td>Footer</td> </tr> </table> .1.g="0" cellspacing="O"> <tr> <td>Top</td> </tr> <tr> <td> <!— Начало первой вложенной т а б л и ц ы . -> </td> </tr> </table> i .4 •ctable width="600" border="0 " cellpaddir. Просмотр исходного кода для рисунка 19.

основанный на использовании таблиц. наконец. полученный при разделении графических файлов на срезы. получите макет. Вы можете попробовать данный метод. 19. . Вставьте HTML-код. чем те. Разделение изображений на срезы для макетных таблиц File £* £ew FjvotKes loots 131 Цв!р Рис. Совет Ваше графическое приложение может иметь возможность экспортирования разделенного макета во вложенные таблицы. Кустарные таблицы в основном более прочные. в контейнерную таблицу. макет не будет разорван Теперь просто вставьте HTML-код четырех разделенных на срезы изображений в соответствующие ячейки контейнерной таблицы. показанный на рисунке 19.ГЛАВА 19. вместо одной таблицы с использованием объединения столбцов и строк.5.5. Когда размеры таблицы изменятся. хотя зачастую лучше построить контейнерную таблицу с нуля. которые выплевывают графические приложения. и вы.

столбцов.1. чтобы создать несколько колонок для текста Обычно. Если вы попытаетесь втиснуть слишком много колонок в ячейку с содержимым. вам не захочется использовать больше двух или. .1. как показано на рисунке 20. и три колонки уже теснятся. Используйте вложенную таблицу в ячейке для основного содержимого вашего макета. и вы полностью поймете почему. мы устанавливаем значения атрибутов border. является размещение вложенной таблицы в ячейке для основного содержимого.ГЛАВА 20. Совет Вам не следует использовать больше двух или трех колонок в многоколонном макете. Это гарантирует. основанном на таблицах. находящихся друг возле друга и не имеющих достаточного расстояния между собой. хотя.2. может быть. Создание многоколонных макетов при помощи таблиц Наилучшим способом получения нескольких колонок текста в макете. возможно. или ужасные горизонтальные полосы прокрутки. как показано на рисунке 20. 760 рхBanner Text Column 1 Text Column 2 -380 рх- -380 px- Puc. cellpadding и c e l l s p a c i n g в 0. которые будут слишком узкими для чтения. Вложенная таблица может иметь любое необх< >димое количество столбцов. трех . 20. Однако когда в макетной таблице размещается несколько колонок текста. то получите колонки. которые не имеют огромных мониторов с чрезвычайно высоким разрешением экрана. мы не хотим иметь такой эффект. Попытайтесь прочитать две колонки текста. что вложенная таблица будет точно подогнана к своей контейнерной ячейке. Подумайте о тех посетителях вашего сайта. когда одна макетная таблица вкладывается внутрь другой макетной таблицы.

лежащего в пределах от 12 до 16 пикселов. но значения. наподобие следующего кода: <table width="412' eel 1spacing="0"> border="0" cellpadding="O" <tr> <td width="200" valign="top">First column of text</td> <td width="12"><. Необходимо подумать о свободном пространстве между колонками. 20. и вы автоматически получите свободное пространство. использует значение атрибута cellspacing. и добавьте отдельный столбец. Если это не согласуется с видом.'— Свободное пространство — <td text</td> width="200" valign="top">Second column </tr> </table> Edit Favorites loots Help How do you like reading this textSetting the cellspacing to zero in when there isn't any white space a multi-column layout isn't the between the columns'' best approach. Просто задайте атрибуту c e l l s p a c i n g любое значение. обычно достаточно. равное желаемой ширине свободного места.ГЛАВА 20. Установите значение атрибута width для этого столбца. который будет служить свободным местом между колонками текста. равное 12. Совет Значение атрибута cellspacing также влияет и на пространство вокруг ячеек таблиц.3. Поэтому колонки текста не будут точно подогнаны к сторонам контейнерной ячейки. которого вы пытаетесь достичь. Макет. отличное от 0. а не только на расстояние между ними. представленный на рисунке 20. Создание многоколонных макетов при помощи таблиц 133 Здесь может помочь атрибут c e l l s p a c i n g тега table. Точное значение зависит от того вида. оставьте значение атрибута cellspacing вложенной таблицы равным 0. Атрибут c e l l s p a c i n g управляет расстоянием между соседними ячейками. который вы собираетесь получить. или вы получите что-то наподобие этого of .2. Puc.

• Сбалансировать колонки текста. Установка атрибута таблицы cellspacing в значение. 20. В противном случае. чтобы они имели приблизительно одинаковую высоту.3.1.Строим Web-сайты 134 Reading the text is easier with just a little extra white space between the columns. Это гарантирует. Если этого не сделать. Убедитесь. браузер подгонит ширины колонок. • Установить значение атрибута v a l i g n каждой ячейки таблицы в t o p . чтобы разместить тот текст. This example uses a cellspacing of 12 to create just enough of a visual break.</p> </td> </tr> </table> Также необходимо выполнить пару других вещей: • Задать одинаковую ширину для всех колонок. что в каждой колонке находится приблизительно одинаковое количество текста. что колонки текста будут выровнены по верхней линии.</p> </td> • <td width="50%" valign="top"> <p>This example uses a cellspacing of 12 to create just enough of a visual break. который вы поместите в них. . Просмотр исходного кода для рисунка 20. браузер отцентрирует их по вертикали. автоматически создает свободное место Листинг 20. Это заставит браузер сделать все колонки одного размера. 12. Рис.3 <table width="400" border="0" cellpadding="O" cellspacing="12"> <tr> <td width="50%" valign="top"> <p>Reading the text is easier with just a little extra white space between the columns. поэтому придется делать руками. Браузер не сделает это за вас. например. иначе вы испортите макет.

Не забывайте указывать значение атрибута width для каждого столбца. Разместите эту таблицу внутри основной области содержимого вашего макета. —> </tr> </table> . -> <td width="columnwidth"' valign="top"> Здесь располагается содержание </td> <!— Окончание кода для колонки.ГЛАВА 20. вставьте ширину ячейки содержимого вашей макетной таблицы. Создание многоколонных макетов при помощи таблиц Инструментарий 135 Создание многоколонного макета при помощи таблиц Данный инструментарий демонстрирует. -> <tr> <!— Этот блок кода создает одну колонку. •stable width="contentcellwidth" border="0" padding="0" cellspacing="whitespacewidth"> cell- <!— В теге t a b l e . В макете с двумя колонками значение атрибута width составляет 50%. сколько столбцов вам необходимо. Скопируй-. те и вставьте эту часть столько раз. как использовать вложенную таблицу для нескольких колонок текста. расположенном выше. Также задайте ширину свободного пространства. В макете с тремя колонками значение атрибута width составляет 33%. В макете с четырьмя колонками значение атрибута width составляет 2 5% и так далее. необходимого между колонками. обычно это значение находится между 12 и 16 пикселами.

"> Text Column 1 width: 172px. и результат не заставит себя ждать. "> style="position: relative. как показано на рисунке 21. иначе некоторые браузеры подавятся.1. который был рассмотрен в главе 20. В основном разделе содержимого данного макета . как для создания многоколонного макета для основанного на таблицах дизайна."> <!— Вложенные разделы начинаются здесь —> <div id="leftcolumn" style="position: absolute.1. Создание многоколонных макетов при помощи таблиц CSS Точно так же. находятся вложенные разделы для каждой колонки текста Листинг 21.1.ГЛАВА 21. Просмотр исходного кода для рисунка 21. для создания многоколонного макета при помощи таблиц CSS используются вложенные элементы разделов. представленную здесь. width: 560px. если вы примените методику. .основной раздел с содержимым должен иметь фиксированную ширину. Единственное препятствие . используются вложенные таблицы. Раздел не может быть текучим. 560 рхBanner ЮОрх Text Column 1 Text Column 2 172 рх 172 рх Рис. 21. width: 560px. Поместите вложенные разделы в основной раздел с содержимым макета. left: Opx.1 <div id="logo" ЮОрх. height: Banner <div id="container" style="position: relative.

Четырнадцати пикселов для ширины свободного места вполне достаточно. или на 186 пикселов слева. l e f t : 372px.в данном случае. Это нерегулируемая ширина каждой из колонок. рассчитанную на шаге 1. сколько колонок вы имеете. Факт остается фактом ~ таблицы предоставляют в целом более надежные макеты. равное 172 пикселам на колонку. используя значения из предыдущих шагов.1 ширина основного раздела содержимого составляет 560 пикселов. Нам необходима горизонтальная позиция каждой колонки. width: 172px. или на 372 пиксела слева. из 186 вычитаем 14 и получаем значение ширины. Возьмите ширину основного раздела содержимого и разделите это значение на число колонок. 3. как создавать многоколонные макеты при помощи таблиц. Инструментарий. является использование макетной таблицы для многоколонной структуры внутри основного раздела содержимого. которое вы хотите создать. поэтому удержите несколько пикселов от значения ширины. На рисунке 21. Смещение слева первой колонки всегда равняется 0 пикселам. поэтому."> width: 172px. мы получим приблизительно 186 пикселов. Напишите код для вложенных разделов. Между колонками необходимо свободное место. основной держатель содержимого. . хотя сторонники таблиц CSS обычно съеживаются от одного упоминания об этой идее. Выполните приведенные шаги для создания вложенных разделов: 1. в зависимости от того.ГЛАВА 21 • Создание многоколонных макетов при помощи таблиц CSS <div id=middlecolumn" s t y l e = " p o s i t i o n : l e f t : 186px. приведенный ниже. следовательно. предоставляет вам шаблон. и так далее. полученного на шаге 1. связанное с фиксированной шириной раздела. выраженная в виде смещения от левой стороны родительского раздела . Следующая колонка смещается на двойную ширину колонки. разделив 560 на три колонки. а затем поместите эту таблицу в основной раздел содержимого вашего CSS-макета. Обратитесь к главе 20 за информацией. Text Column 2 Text Column 3 <!— Окончание вложенных разделов —> Совет Одним из способов обойти ограничение. <div id="rightcolumn" s t y l e = " p o s i t ion: a b s o l u t e . Смешивание таблиц и CSS-кода для макета отлично работает. Следующая колонка смещается на исходную ширину. 2."> 137 absolute.

а не с 1. что основной раздел содержимого доджей иметь фиксированную ширину . width: columwidthpx. не пытайтесь уместить на макете больше. а не окна браузера? Поскольку разделы колонок являются вложенными. получерным на шаге 2 вышеописанной процедуры. —> .v дел. tion * columnnumber)px. полученным на шаге 1 вышеописанной процедуры. —> <div id="columncolumnnumber" a b s o l u t e .его ширина должна иметь абсолютный размер в пикселах. иначе формула в коде будет работать неправильно.Строим Web-сайты 138 Совет Как и в случае с таблицами. чем две или три CSS-колонки. Инструментарий Создание многоколонного макета при помощи таблиц CSS Данный инструментарий предоставляет код для многоколонных разделов. Помните. Замените выражение coluinnwidth значением. чем две или три колонки. они наследуют свое базовое положение от родительского раздела. Вложите их в основной раздел содержимого вашего макета. <!— Каждая колонка получает свой собственный p. а не в процентах. начинающиеся прямо от левой стороны окна браузера."> style="position: l e f t : (columnposi- Содержимое располагается здесь <!— Повторите этот блок кода для каждой колонки макета. Нумерация колонок слева направо начинается с О. Этот же код для невложенных разделов создаст колонки. Замените выражение columnposition значением. Определение Почему ПОЗИЦИИ колонок задаются относительно позиции основного раздела содержимого. Для большинства сайтов не пытайтесь втиснуть в основной раздел содержимого больше.

и. может сберечь ваше время и усилия Листинг 22. Просто заполните ячейки соответствующим содержимым. наподобие представленного на этом рисунке. так будет проще для вас. Предотвращение разрыва навигационной панели При разработке макетной таблицы все мысли должны быть направлены на использование наименьшего количества ячеек. загрузите страницу в Интернете и можете считать дело завершенным.1.1. позвольте таблице увеличиваться до бесконечности по вертикали. где какой элемент будет расположен на странице. Простой макет. так будет проще для кодировщиков. В зависимости от того.1 <table width="600"> <tr> <td colspan="2">Top</td> </tr> <tr> <td width="125">Nav</td> <td height="250">Main Content Area</td> </tr> </table> . 22. 600 рх Тор Nav Main Content Area 250 рх -125 рх- Рис. Так будет проще для дизайнерского программного обеспечения. Просмотр исходного кода для рисунка 22. возможно. что самое важное. похожий на изображенный на рисунке 22.ГЛАВА 22. вы сможете сформировать макет.1.

ваш сайт будет изменяться в будущем. когда заранее известна высота основной области содержимого. Чтобы сделать вещи красивыми и простыми. попытаетесь разбить ячейку слева для кнопок навигационной панели Листинг 22. и дизайн должен быть достаточно гибким для работы с различными объемами содержимого.140 Строим Web-сайты Воодушевленные простотой.2. вы можете испытать искушение разбить ячейку слева i ia отдельные строки для кнопок навигационной панели.2.. Макет. (В данном случае высота равняется 250 пикселам. представленный на рисунке 22.> </tr> <tr> <td>Nav 2</td> < / t r > <tr> • : • • - . возможно. используя атрибут rowspan. Возможно. вы..2. работает в том случае. каждая из которых имеет различный объем содержимого. <td width="125">Nav l</td> <!— Далее идет ячейка с объединением строк —> <td height="250" rowspan="5">Main Content Area</td.2 •stable width="600"> <tr> <td colspan="2">Top</td> </tr> <tr> .2.) Данное значение высоты не всегда просто высчитать. Просмотр исходного кода для рисунка 22. 600 рх Тор Nav1 Main Content Area Nav2 250 px Nav3 Nav4 Nav5 -<—125px—*- Рис. как показано на рисунке 22. Возможно. 22. ваш дизайн будет использоваться на разных страницах.

—125 px—*- Рис. если он будет использовать собственную таблицу стилей с каким-нибудь загадочным шрифтом. При увеличении высоты основной области содержимого высоты ячеек навигационной панели не отстают от общей высоты . будет работать с браузером. как вытолкнуть границы макета за пределы высоты. вероятно. На рисунке 22. Ничуть не лучше.расскажи ему о своих планах. Предотвращение разрыва навигационной панели 141 <td>Nav 3</td> </tr> <tr> <td>Nav 4</td> </tr> <tr> <td>Nav 5</td> </tr> </table> Даже если вы все уже посчитали. Пользователь.3. указанной в дизайне. При увеличении высоты основной области содержимого высоты всех ячеек навигационной панели также увеличиваются для согласованности. -* 600 px *- Top Nav1 Main Content Area Nav2 Nav3 400 px Nav4 Nav5 -. что произойдет. вспомните старую поговорку: хочешь рассмешить бога . 22.3 показано. Кто-то еще найдет способ. у которого по умолчанию значение размера текста установлено в Largest (Самый крупный).ГЛАВА 22.

данный подход разрушает целостность вашего дизайна. чтобы найти основную навигацию вашей страницы. Вот в чем проблема.это раздражительные люди. Слишком большое количество содержимого приводит к разрыву навигационной панели Это является проблемой. Ваши пользователи . указав высоты для каждой из пяти ячеек навигационной панели. если область содержимого изменяет размер. кто имеет атрибут rowspan="5".изменяют размер пропорционально. однако посмотрите на рисунок 22. 22. чтобы заставить их охватить область содержимого. Content goes here. что основная область содержимого является единственной. независимо от того. Проверьте листинг 22. Браузер автоматически раздувает ячейки навигационной панели. Почему разрывается навигационная панель? Вините во всем объединение строк. Навигация должна быть понятной и тотчас же доступной на всем сайте. Во-вторых.е. ft Main Content Area Content goes here Content goes here Content goes here Content goes here Content goes here. и они не хотят на каждой новой странице искать положение правой навигационной кнопки.4. Как только .ячейки навигационной панели . т. Вы можете попытаться устранить ее. Content goes here. Пользователи не хотят выполнять прокрутку страницы. могут исчезнуть из области видимости.2 и обратите внимание. как растянулись кнопки навигационной панели. как минимум. . по двум причинам. Естественно. высоты ячеек для навигационных кнопок полностью зависят от высоты основной области содержимого.Строим Web-сайты 142 Теоретически это может показаться не такой уж и большой проблемой. Другими словами. какие значения вы присвоили.4. кнопки навигационной панели. создавая уродливый беспорядок. увы. Белый фон страницы просматривается через дыры в дизайне. Они хотят оставаться на одном и том же месте от страницы к странице. этот подход не работает. основная область содержимого охватывает пять ячеек для навигационных кнопок в макетной таблице. Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Рис. находящиеся в самом низу. строки. Во-первых. однако. Обратите внимание. которые она охватывает. когда основная область содержимого вышла за пределы максимальной высоты.

или таблиц внутри других таблиц. поскольку браузер делает высоту ячейки таблицы такой. изображение.ГЛАВА 22.1. медиа-файл или даже другую таблицу. Вернитесь к исходному макету. 22. и навигационная панель разрывается в любом случае. избавьтесь от атрибута height.5 <table width="600"> <tr> <td colspan="2">Top</td> </tr> <tr> <td width="125" valign="top"> <!— Начало вложенной таблицы. Просмотр исходного кода для рисунка 22. охваченных строками. показанному на рисунке 21. Эта просторная ячейка слева может хранить любой тип содержимого: текст. Листинг 22. браузер игнорирует значение высоты для данной ячейки и высот. как показано на рисунке 22. —> .3.5. Предотвращение разрыва навигационной панели 143 основная область содержимого выйдет за пределы предопределенной высоты. какой она должна быть. Создайте вложенную таблицу для навигационной панели в ячейке слева Совет Как только содержимое будет добавлено в ячейку основной области содержимого. 600 px Top -«—100%—*• Nav1 Main Content Area Nav2 250 px Nav3 Nav4 Nav5 -125 px Рис. Простейшим способом заставить макет работать является использование вложенных таблиц.5.

Данный атрибут заставляет браузер выравнивать содержимое ячейки по верху. проверьте атрибуты тега table вложенной таблицы. вам необходимо установить значения атрибутов cellpadding. Обратите также внимание. что все время удерживает вложенную таблицу возле самого верхнего края ячейки. наподобие следующей строки кода: <table width="100%' border="0"> eellpadding="0" eel 1spacing="0" . что значение атрибута width вложенной таблицы установлено в 100%. чтобы заполнять всю ширину родительской ячейки. прямо там. cellspacing и border в 0.Строим Web-сайты 144 <table width="100%"> <tr> . что ячейка с вложенной таблицей имеет атрибут v a l i g n = " t o p " . <td>Nav l</td> . Совет Если после помещения навигационной панели во вложенную таблицу. где посетители ожидают найти ее. '. она все еще выглядит разорванной. Возможно. • </tr> <tr> • <td>Nav 2</td> </tr> <tr> <td>Nav 3</td> </tr> <tr> • • <td>Nav 4</td> </tr> <tr> <td>Nav 5</td> </tr> </table> <!— Окончание вложенной таблицы. —> </td> <td height="250" valign="top">Main Content Area</td> </tr> :/table> Обратите внимание. Это заставляет таблицу увеличиваться.

ГЛАВА 22. Предотвращение разрыва навигационной панели

145

Теперь в основную ячейку можно добавить столько содержимого, сколько пожелаете.
Поскольку мы не использовали объединение строк для создания ячеек навигационной панели, в основную ячейку можно добавить сколь угодно много содержимого, и
навигационная панель не будет разорвана. Макет на рисунке 22.6 доказывает это.
Ячейка, содержащая вложенную таблицу, выросла, однако размеры вложенной таблицы не изменятся до тех пор, пока вы не измените содержимое в ячейках вложенной
таблицы.

Main Content Area
Nav з |

Content'goes here Content goes here Content goes here
Content goes hers
Content goes here Content goes here Content goes here
Content goes here.
Content goes here. Content goes here. Content goes here
Content goes here
Content goes here Content goes here. Content goes here
Content goes here
Content goes here.

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

Совет
Если ВЫ используете программное обеспечение,
например,
Macromedia Fireworks, Adobe Photoshop или Adobe ImageReady, для разделения дизайна на срезы, неожиданный разрыв навигационной панели присутствует всегда. Чтобы избежать этого, разделяйте на срезы каждую основную область дизайна по отдельности. За дополнительной информацией обратитесь к главе 19.

ГЛАВА 23.
Раскрашивание ячеек таблицы
Ячейки таблицы в языке HTML имеют атрибут bgcolor, управляющий цветом фона ячейки. Задание цветов фона для определенных ячеек в макете придает BameMv
дизайну большую выразительность без использования файлов изображений. Сравните макет, представленный на рисунке 23.1, с макетом на рисунке 23.2, и вы согласитесь с этим.

Logo

Links

Puc. 23.1. Ячейки таблицы в данном макете не используют цвета фона
Листинг 23.1. Просмотр исходного кода для рисунка 23.1
<table width="760" border="0" cellpadding="O" cellspacing="O">
<tr>
<td width="760" valign="top">Logo</td>
</tr>
<tr>
<td width="760" valign="top">
<table width="760" border="0" cellpadding="O" cellspao
ing="0">
<tr>
<td

width="200" valign="top">Nav</td>

<td

width="400" valign="top">Content</td>

• <td width="160" valign="top">Links</td>
</tr> ',

ГЛАВА 23. Раскрашивание ячеек таблицы

147

</table>
</td>
</tr>
</table>

Совет
Используйте вместо файлов изображений цвета фона везде, где это
возможно. Поскольку цвета определяются в языке HTML, вашим посетителям не придется загружать отдельные файлы изображений,
чтобы увидеть цвета.

Рис. 23.2. Указав цвета фона для областей Logo (Логотип), Nav (Навигация)
и Links (Ссылки), вы создадите более выразительную страницу
без использования файлов изображений
Листинг 23.2. Просмотр исходного кода для рисунка 23.2
<table width="760" border="0" cellpadding="O".cellspacing="O">
<tr>
<td width="760" valign="top" bgcolor="#99CCFF">Logo</td>
</tr>
<tr>
<td width="760" valign="top">
<table
ing="0">
<tr>

width="760" border="0" cellpadding="O" cellspac-

Строим Web-сайты

148
<td
width="200"
Nav</td>

valign="top"

bgcolor="#99CCFF":-

<td width="400" valign="top">Content</td>
<td
width="160"
>Links</td>

valign="top"

bgcolor="#99FF9 Э•
'

</tr>
</table>
</td>
</tr>
</table>
Обратите внимание, что в листинге 23.2 желаемый цвет задается строкой символов,
называемой шестнадцатеричным кодом цвета. Код начинается со знака решетки (#), за которым следует шестизначное шестнадцатеричное число. В шестнадцатеричной системе счисления используется основание 16, а не основание 10, как в нашей
распространенной, ежедневно используемой десятичной системе счисления, что уже
знают фанаты математики, находящиеся среди нас. Первые десять цифр шестнадцатеричной системы счисления являются обычными десятичными цифрами от 0 до 9.
Оставшиеся шесть цифр - это буквы от А до F, поскольку у нас нет числовых символов
для их представления. Поэтому, когда вы видите шестнадцатеричное значение, наподобие FC или FF, не считайте их буквами. На самом деле это числа.

Определение
В шестнадцатеричной системе счисления используется основание
16, а не основание 10. Числовые значения в этой системе представляются при помощи символов от 0 до 9 для первых десяти цифр, и
символов от А до F для оставшихся шести цифр.

Совет
Убедитесь, что на фоне цвета ячейки таблицы текст виден отчетливо.
Если контраст выглядит так, будто можно было пойти другим путем,
значит вы допустили ошибку из-за невнимательности.
Шестнадцатеричный код цвета включает три набора шестнадцатеричных чисел по два
разряда каждый. Первый двухзначный набор отвечает за количество красного в цвете.
Второй набор управляет количеством зеленого, а третий - количеством синего. Смешивание различных уровней красного, зеленого и синего цветов создает каждый отдельный цвет, который вы видите на экране. Чем выше значение конкретного двухзначного набора, тем более заметным будет составляющий цвет в конечном оттенке.
Возьмем шестнадцатеричный код для красного цвета, который равен #FF0000. Если
его разложить на составляющие, мы получим значение FF для красной составляющей,

ГЛАВА 23. Раскрашивание ячеек таблицы

149

значение 00 для зеленой составляющей и значение 00 для синей составляющей.
Это абсолютно красный цвет, поскольку в позиции для красной составляющей находится значение FF - самое большое значение из всех возможных для двухзначного
шестнадцатеричного числа. Для этого конкретного оттенка составляющие зеленого и
синего цветов не снижают чистоту красного цвета. Подобным образом, код для зеленого цвета равен #00FF00 (ноль красного, полный зеленый, ноль синего), а код для синего цвета равен #0OOOFF (ноль красного, ноль зеленого, полный синего).

Совет
Цифры в каждом положении шестнадцатеричного кода числа не обязаны совпадать. Код &FC02D5 является отличным шестнадцатеричным цветом, где значение FC находится в позиции для красной составляющей, 02 - в позиции для зеленой составляющей, и D5 - в позиции для синей составляющей. Однако для получения наилучших
результатов в Интернете придерживайтесь цифр, кратных трем: 0, 3,
6, 9, С и F. Следовательно, ближайшим Web-эквивалентом для кода
«FC02D5 является код #FF00CC.
Чтобы создать цвет, например, фиолетовый, смешивается вместе пара составляющих. Красная и синяя составляющие создают фиолетовый цвет, поэтому одной из возможностей является смешивание полной красной и полной синей составляющих, как,
например, #FF00FF, что дает очень яркий и чистый цвет. Но, возможно, вы захотите
получить фиолетовый цвет с краснотой. Просто уменьшите уровень синей составляющей, присвоив ей меньшее значение, например, #FF0099 или #FF0066. Чтобы получить фиолетовый цвет с синевой, выполните противоположное действие. Оставьте
полной синюю составляющую и уменьшите уровень красной составляющей, например #9.900FF или #6600FF.

Совет
Если вы по-настоящему ненавидите шестнадцатеричные коды, можете вместо них всегда указывать название цвета, например,
bgcolor= "lightgreen",
однако лучше все же использовать ближайшее шестнадцатеричное значение для Интернета, которое менее
открыто для интерпретации браузером посетителя. Более того, названия могут вводить в заблуждение. Цвет с названием darkgray (темно-серый) на самом деле соответствует более светлому оттенку серого, чем цвет с названием gray (серый).
Немного попрактиковавшись, вы можете научиться смешивать любые необходимые
цвета, не утруждая себя запоминанием чего-либо из таблиц, похожих на таблицу 23.1,
в которой приведены названия и шестнадцатеричные коды цветов для распространенных оттенков.

150

Строим Web-сайты

Табл. 23.1. Распространенные щ>ета и их коды
Шестнадцатери чный
код

Ближайший
Web-эквивалент

Зеленовато-голубой aqua

#OOFFFF

#00FFFF

Черный

black

#000000

#000000

Синий

blue

#0000FF

#0000FF

Синий, темный

darkblue

#00008B

#000099

Синий, светлый

lightblue

#ADD8E6

#CCCCFF

Синий, небесный

skyblue

#87CEEB

#99CCFF

Золотой

gold

#FFD700

#FFCC00

Серый

gray

#808080

#999999

Серый, темный

dimgray

#696969

#666666

Зеленый

green

#008000

#009900

Зеленый, темный

darkgreen

#006400

#006600

Зеленый, светлый

lightgreen .

#90EE90

#99FF99

Зеленый, морской

seagreen

#2E8B57

#339966

Индиго

indigo

#4B0082

#330099

Оранжевый

orange

#FF5A00

#FF9900

Розовый

pink

#FFC0CB

#FFCCCC

Пурпурный

purple

#800080

#990099

Красный

red

#FF0000

#FF0000

Красный, темный

darkred

#8B0000

#990000

Серебристый

silver

#cococo

#cccccc

Фиолетовый

violet

#EE82EE

#FF99FF

Белый

white

#FFFFFF

#FFFFFF

Желтый

yellow

#FFFF00

#FFFF00

Цвет

Название

* Цвет с названием darkgray (темно-серый) на самом деле светлее, чем цвет с названием gray (серый). Вместо него используйте цвет dimgray (тускло-серый).

ГЛАВА24.
Раскрашивание и форматирование
Ш-разделов
В главе 23 было показано, как раскрашивать ячейки таблицы. Для разделов можно также указывать цвета фона, вместе с парой других атрибутов, касающихся их внешнего
вида, которые HTML-таблицы просто не поддерживают. И вновь, как и во всех других
случаях при использовании таблиц CSS, обязательно протестируйте свой дизайн на
нескольких браузерах перед тем, как загрузить страницу в Интернет. Кто знает, как
различные браузеры исказят вашу совершенно правильную CSS-разметку на этот раз.
Если макет, представленный на рисунке 24.1, кажется вам знакомым, то это потому,
что вы уже видели нечто похожее на него до этого момента - если быть точными, в
главе 18. В коде не используются цвета фона, что подтверждается соответствующим
листингом. Как можно увидеть на рисунке 24.2, добавление атрибута backgroundcolor к определению стиля создает больший графический эффект.
Листинг 24.1. Просмотр исходного кода для рисунка 24.1
<div id="logo" s t y l e = " p o s i t i o n :
lOOpx; t o p : Opx; l e f t : 0px;">

absolute;

width:

100%;

height:

Logo

<div id="nav" style="position: absolute; width: 200px; top: lOOpx;
left: 0px;">
Nav

<div id="links" style="position: absolute;
lOOpx; right: 0px;">
Links

.

.

<div id="content" style="position: absolute;
200px; right: 175px;">
Content

width:

175px; top:

.

top: lOOpx;

left:

152

Строим Web-сайты

PMC. 24.1. В этом CSS-макете цвета фона не указываются ни для какого раздела

Рис. 24.2. Этот CSS-макет создает больший графический эффект,
указывая цвета фона в разделах Logo (Логотип), Nav (Навигация) и Links (Ссылки)
Листинг 24.2. Просмотр исходного кода для рисунка 24.2
<div id="logo" s t y l e = " p o s i t i o n : a b s o l u t e ; width: 100%;
'lOOpx; t o p : Opx; l e f t : Opx; background-color: #99CCFF;">

height

Logo

<div id="nav" style="position: absolute; width: 200px; top: lOOpx;
left: Opx; background-color: #99CCFF;">
Nav

ГЛАВА 24. Раскрашивание и форматирование CSS-разделов
<div id="links" style="position: absolute; width:
ЮОрх; r i g h t : Opx; background-color: #99FF99;">

153
175px;

top:

• Links

<div id="content" style="position:
200px; r i g h t : 175px;">

absolute;

top:

lOOpx;

left:

Content

Как и в случае с ячейками таблицы, цвет фона задается шестнадцатеричным кодом
цвета. Обратитесь к главе 23 за списком распространенных цветов и их шестнадцатеричных значений.
Поскольку вы работаете с таблицами CSS, вы не обязаны останавливаться на раскрашивании фона. Так, вокруг раздела Links (Ссылки) можно добавить сплошную черную
рамку, как показано на рисунке 24.3.

Рис. 24.3. Только ваши предпочтения и возможности клиентского браузера по работе
с таблицами CSS могут помешать добавлению рамки вокруг раздела Links (Ссылки)

Совет
Можно определить различный внешний вид верхнего, левого, правого и нижнего сегментов рамки. За подробной информацией обратитесь к таблице 24.1 в конце данной главы.

Для создания рамки в определение стиля раздела добавляется три новых атрибута:
<div id="links" style="position: absolute; width: 175px; top:

Просмотр исходного кода для рисунка 24. вместо сплошной линии вы захотите использовать разрезную пунктирную линию или использовать голубую рамку вместо черной. border-color: #0000FF. background-color: #99FF99. Листинг 24."> 4px. Links Возможно. вам не понравится способ плотного прилегания текста к углу раздела. Links Листинг 24."> tcp: 2px. padding: 12px.3. Просмотр исходного кода для рисунка 24. Рис. tcp: ЮОрх. right: Opx. right: Opx."> Links . width: 175px. как показано на рисунке 24. и ее внешний вид изменится Возможно. Просто задайте разделу некоторое внутреннее свободное место при помощи атрибута p a d d i n g . border-color: #0000FF. как показано на рисунке 24. width: 175px.4. right: Opx. border-style: dashed.4 <div id="links" style="position: absolute. border-width: border-style: solid. background-color: #99FF99.4. ЮОрх.5. border-width: border-style: dashed. Выберите другой стиль рамки. background-color: #99FF99.5 <div id="links" style="position: absolute.154 Строим Web-сайты ЮОрх.4. border-color: #000000. или использовать более тонкую линию для рамки. 24. border-width: 2px.

. т • • . 24. левой. Рис. width: 175px. ' ' : ' • . как вы уже видели (или не видели) в главе 10.6.5. Все это собрано в таблице 24.6.5. . добавляя свободное место и определяя его различные значения для верхней.1. Куда исчез раздел ? Он все еще находится в исходном коде. однако его атрибут visibility установлен в значение h i dden Листинг 24.6 <div id="links" lOOpx. background-color: #99FF99. ' • • • . • : • • • Рис. не удаляя при этом их код.ГЛАВА 24. правой и нижней стороны раздела. border-width: top: 2px. Вставьте дополнительное свободное место при помощи атрибута padding И. Просмотр исходного кода для рисунка 24. на самом деле элементы раздела можно'заставить исчезнуть. Раскрашивание и форматирование CSS-разделов 155 Совет Как и при работе со стилями рамки. как показано на рисунке 24. 24. r i g h t : style="position: absolute. . Opx. можно сойти с ума.

у вас ничего не получится. 24.Типом рамки bottom снизу border-styledashed. ridge. groove. В таблицах CSS каждый раздел может иметь своё собственное значение атрибута paddi ng. Повторюсь.Строим Web-сайты 156 border-style: dashed. HTML-таблицы имеют атрибут cellpadding. Могу ли я добавить свободное пространство при помощи атрибута cellpadding? Отчасти.Шестнадцатеричный код b o r d e r . "•' visi -.Шестнадцатеричный код backgroundцвета дела c o l o r : #FFCC0C border-color Цветом всех четы. double. цвета border-color. ridge. double. inset. Если вы хотите добавить свободное место в одной ячейке. dotted. поэтому таблицы CSS предоставляют гораздо больший диапазон возможностей. что HTML-таблицы являются более устойчивыми. рех сторон рамки цвета border-colorb o t t o m .c o l o r цвета r i g h t : #00000С' Шестнадцатеричный код border-colortop: #000000. цвета border-colortop Цветом верхней стороны рамки border-style border-style: Типом рамки всех dashed. border-color: #0000FF. работающий подобно атрибуту padding таблиц CSS.1 приведены распространенные CSS-атрибуты для форматирования pauдел ов макета. Помните. чем которые когда-либо предоставляли HTML-таблицы. следовательно.c o l o r t o p : #000000. Распространенные CSS-атрибуты для форматирования разделов макета Атрибут backgroundcolor Управляет Допустимые Пример значения* Цветом фона раз.• Цветом нижней стороны рамки Шестнадцатеричный код border-colorbottom: #00000: цвета border-color. Часто задаваемые вопросы Я ненавижу таблицы CSS. четырех сторон solid border-style. groove. начав работу с таблицами CSS. inset. dotted. outset. outset. padding: 12px. solid .1.Цветом правой right стороны рамки Шестнадцатеричный код b o r d e r . но не добавлять в другой. dashed. Табл.Цветом левой left стороны рамки Шестнадцатеричный код border-colorleft: #000000. вы приносите в жертву высокую совместимость между браузерами."> Links В таблице 24. bottom: dotted. bility: hidden. Однако в HTML-таблице значение атрибута cellpadding применяется ко всем ячейкам таблицы. что каждый раздел может иметь свой собственный определенный стиль.

right : groove. top: 0. outset. поддер. например: рх. помимо перечисленных. например: рх. cm или in paddingleft Размером свободного Любые размеры.33cm.border-widthживаемые таблицами CSS. double. solid borderwidth Толщиной всех четырех сторон рамки Любые размеры. outset.например: рх. 0. cm или in borderТолщиной верхней width-top стороны рамки padding Размером свободного места по всем четырем сторонам раздела paddingКоличеством свободbottom ного места снизу раздела Любые размеры.33cm.Любые размеры. поддер. cm или in раздела paddingright Размером свободного места с правой стороны раздела Любые размеры.padding: 12px. живаемые таблицами CSS. например: рх. groove. поддер.03in.Любые размеры. поддер.padding-left: места с левой стороны живаемые таблицами CSS. dotted. top: inset. ridge. 12px. cm или in paddingtop Размером свободного места сверху раздела Любые размеры. outset.03cm. inset.padding-right: живаемые таблицами CSS. поддер. right: 4px. 0. например: рх. cm или in Любые размеры.padding-top: живаемые таблицами CSS. visible visibility например: рх.03 in.33in. solid border-styledashed. Отображением или сокрытием раздела hidden. left: double. поддер. groove. inset. dotted. например: рх. bottom: 0. 0. а некоторые браузеры могут не поддерживать даже приведенные значения. ridge. Некоторые браузеры могут поддерживать другие значения.157 ГЛАВА 24. inset. cm или in Любые размеры.border-width"живаемые таблицами CSS.padding-bottom: живаемые таблицами CSS. v i s i b i l i t y : hidden.border-width: живаемые таблицами CSS.border-widthроны рамки живаемые таблицами CSS. поддер. . dotted. поддер.border-widthживаемые таблицами CSS. solid borderТипом рамки с правой стороны styleright borderТипом рамки сверху style-top border-styledashed. ridge. cm или in borderwidthbottom Толщиной нижней сто. cm или in borderwidthleft ' Толщиной левой стороны рамки borderwidthright Толщиной правой сто. left: 0. Раскрашивание и форматирование CSS-разделов Атрибут Управляет borderstyleleft Типом рамки с левой стороны Пример Допустимые значения* border-styledashed. double. например: рх. cm или in Любые размеры. cm или in. например: рх. поддер. роны рамки например: рх. 4px. groove. double. поддер.

вообще говоря. Помните. однако на множество типов дизайна . Атрибуты leftmargin и topmargin в браузере IE управляют размером пространства слева и сверху окна браузера. можно наоборот создавать дополнительное пространство.: <body marginwidth="O" marginheight="O"> Если вы находчивы. . установив значение атрибута marginwidth в браузере IE. установив все четыре атрибута. поэтому. устанавливая эти атрибуты в ненулевые значения. то используете все четыре атрибута: <body leftmargin="0" height="0"> topmargin="0" marginwidth="O" margin- С другой стороны. поэтому нельзя получить дополнительное правое поле.дополнительное пространство плохо влияет. которые браузер не понимает? Браузеры IE и Netscape игнорируют атрибуты. на которой расположен только текст. и наоборот. но ничего не делают справа и снизу. как атрибут marginwidth браузера Netscape обеспечивает равные пространства слева и справа.особенно на текучие макеты . попытайтесь использовать таблицы CSS вместо языка HTML (обратитесь к главе 26). какие атрибуты использовать. Это удобно. вы не создадите проблем с совместимостью. что браузер IE не понимает атрибуты браузера Netscape. Добавление дополнительного пространства можно отключить. соответственно.ГЛАВА 25. Для большего уровня управления полями. а атрибут marginheight . установив значения пары атрибутов тега body в 0.сверху и снизу. которые они не понимают. Подобным образом нельзя оказать влияние на левую сторону окна браузера. Для браузера Internet Explorer соответствующими атрибутами являются leftmargin и topmargin: <body leftmargin="0" topmargin="0"> Для браузеров Netscape такими атрибутами являются marginwidth и marginheigh. всего лишь установив значение атрибута leftmargin в браузере Netscape. От браузера зависит. когда у вас есть Web-страница. Часто задаваемые вопросы ЧТО произойдет со значениями. Управление пространством дизайна в языке HTML По умолчанию Web-браузеры добавляют некоторое дополнительное пространство между интерфейсом браузера и началом страницы. в то время.

левое поле. однако эти атрибуты являются частными . левое. представленный на рисунке 26. когда страница включает CSS-макеты.верхнее. тем самым исключая использование на странице любых пространств со значениями по умолчанию. margin-right и margin-bottom можно легко определить различные размеры пространств для различных полей. Макет. равное 100 пикселам. имеет верхнее поле. Таблицы CSS не ограничиваются только этим.1."> ' . равное 400 пикселам. Просмотр исходного кода для рисунка 26. наподобие следующего: <body style="margin: 200 400 100 ЗООрх. равное 200 пикселам. справа и снизу) после установки полей. margin-right: Совет Для краткости можно задать размеры всех полей в атрибуте margin. Браузеры полностью игнорируют атрибуты. выполнив обход по часовой стрелке (сверху.1.ГААВА26. равное 300 пикселам. которые они не понимают.в О пикселов. сверху. Листинг 26. вам нужно следить за управлением полями при помощи таблиц CSS. справа. правое поле. При помощи атрибутов margin-top. и нижнее поле. Просто определите стиль для тега body на странице."> ЗООрх.1 ' <body style="margin-top: 200px. правое и нижнее . Совет Ирония заключается том. Управление пространством дизайна при помощи таблиц CSS Как ВИДНО из главы 25. Вы получаете большее управление над полями мри использовании каскадных таблиц стилей (CSS)."> Эта строка кода устанавливает все четыре поля . язык HTML предоставляет несколько атрибутов тега body для управления стандартными значениями пространства в окне браузера. наподобие следующей строки кода: <body style="margin: Opx. Симпатия к пространству полей может сбить положения ваших разделов. margin-bottom: 100px. снизу и слева). m a r g i n . Вам может понадобиться откорректировать значения их позиций (слева.l e f t : 400рх. margin-left.они работают только в определенных браузерах.

1. 26. Эта страница использует таблицы CSS для управления размером пространств для всех четырех полей .Строим Web-сайты 160 Fiie Edit View Favorites Tools This page uses CSS to control the space on all four Puc.

Вопросы. касающиеся изображений Выбор правильного типа файла изображения Оптимизация Web-изображений Трансформация изображений с использованием атрибутов языка HTML Размещение внутристрочных изображений при помощи языка HTML Плавающие внутристрочные изображения с использованием таблиц CSS Разработка состояний кнопок Создание ролловерной графики Улучшение доступности изображений Создание карт ссылок Улучшение доступности карт ссылок Использование фоновых изображений в ячейках таблицы Использование фоновых изображений в CSS-разделах Использование фоновых изображений на Web-страницах .ЧАСТЬ 3.

которую имеют файлы в формате GIF и PNG. поскольку его палитра полностью заполнена. отображающие графику. Однако во всем мире закончилось действие патента на использование формата GIF и теперь формат принадлежит миру. В итоге вы получаете файл в формате GIF или PNG. и его размер больше. какие цвета используются в изображении. . Совет < Типы файлов GIF и PNG очень похожи. ответьте на два вопроса: 1. которые не поддерживает браузер Netscape. Выбор правильного типа файла изображения Файлы изображений используют множество различных форматов. Вообще говоря. Браузер компании Microsoft. чем размер соответствующего файла в формате JPEG.». Браузеры. Поскольку фотографии обычно имеют множество едва различимых оттенков и градаций. наилучшим образом работают с форматом JPEG. цвете. какие форматы изображений использовать на своем сайте. Какие из тех типов файлов создают файлы с наименьшими размерами. содержащие большое количество информации о. который выглядит зернистым. какие точно типы графических файлов отображать. максимум числа которых составляет 256 различных оттенков. Они используются для одних и тех же видов изображений и дают практически одинаковый размер файла.. Почему? Файлы в формате JPEG не имеют встроенной палитры или таблицы цветов.. например. однако только некоторые из этих форматов хорошо работают в Интернете. Чтобы решить. При добавлении в палитру большего количества цветов общий размер файла увеличивается. Все основные браузеры отображают изображения в форматах GIF. а формат PNG никогда не был чьей-либо собственностью. как можно предположить. места для 256 цветов становятся занятыми довольно быстро. JPEG и PNG.ГЛАВА 27. поэтому нам нужно ограничить наши Web-изображения этими тремя форматами. стремятся поддерживать наиболее распространенных типов файлов. а штриховые иллюстрации и изображения с большими областями сплошного цвета лучше работают с форматами GIF или PNG. фотографии и другие изображения. Ответом на второй вопрос является пугающее «Это зависит от . браузеры не договариваются между собой о том. Много лет назад основное отличие заключалось в том. что формат GIF был собственностью компании CompuServe. Какие типы файлов поддерживаются всеми основными браузерами? 2. однако. поддерживает растровые файлы операционной системы Windows (BMP). не принося в жертву качество изображения? Ответ на первый вопрос прост. Палитра формата GIF или PNG определяет.

несколько Нет 256 цветов уровней прозрачности . один уровень прозрачности Есть JPEG джэйнег Joint Photography Experts Group (Объединенная группа экспертов в области фотографии) Нет. Выбор правильного типа файла изображения 163 Определение Встроенная в файл изображения таблица цветов. Профессиональное программное обеспечение для работы с графикой. Табл. который лучше всего подходит для каждого конкретного изображения. тогда как файлы в формате JPEG не имеют палитр и поэтому не ограничены 256 цветами. И некоторые фотографии отлично выглядят в формате GIF или PNG даже с потерей информации о цвете. Выбирайте формат.ГЛАВА 27. максимум 256 цветов Есть. Формат JPEG не позволяет ничего из этого. Даже при этих условиях рассматривается не только число цветов. поэтому вам не придется гадать. нет ограничения по цвету Нет Нет PNG пинг Portable Network Graphics (Переносимая сетевая графика) Есть. Форматы GIF и PNG позволяют определять прозрачные цвета. максимум Есть. поскольку различные форматы также предоставляют различные возможности. при этом сохраняя общее качество изображения. Вам следует попробовать свои изображения во всех трех форматах. содержащая до 256 цветов. Распространенные типы файлов Web-изображений Тип файла Произно. Совет Непременно перемешивайте и сочетайте типы изображений на своем сайте.1. чтобы получить наилучший Web-файл из возможных.Обозначает сится Палитра Прозрачность Анимация GIF джифф Graphics Interchange или гифф Format (Формат графического обмена) Есть. 27. например. Не попадайте в западню. Adobe Photoshop и Macromedia Fireworks. В файлы в формате GIF и PNG входит палитра. а формат GIF позволяет создавать анимацию. позволяет сравнивать рядом различные форматы ваших изображений. используя только изображения в формате JPEG или GIF. Однако если в вашем изображении используется меньше 256 цветов.1. файлы в формате GIF и PNG обычно имеют меньший размер. вы можете это увидеть в таблице 27.

обычные старые модемы для коммутируемого доступа не вышли из употребления. Здесь нет необходимости брать банк. Быстро загружающиеся изображения.и кабельные линии для подключения к Интернету. и они будут ожидать просмотра картинок. предназначенного для редактирования графических файлов. Независимо от того.это ваша профессия. Если ваше приложение для работы с графикой не позволяет выполнять представленные операции. Программа Adobe Photoshop Elements. попытайтесь уговорить вашего работодателя на покупку полной версии программы Photoshop или Macromedia Fireworks. что напоминает телевизор. пока не перешел от страниц с педантичным HTML-текстом к графическому дизайну с полноцветными изображениями. Посадите их перед чемнибудь. посетители сделают соответствующие выводы о качестве информации на вашем сайте. Помните. Оптимизация Web-изобраЖений Оптимизация графического файла для Web означает максимально возможное уменьшение размера файла. является отличным инструментом для работы с Web-изображениями. при котором качество изображения сохраняется без изменений. низкого качества. И хотя все больше и больше людей используют высокоскоростные DSL. вы заметите улучшение производительности. что Интернет не мог превратиться в основное направление до тех пор. Еще одной хорошей программой является программа Jasc Paint Shop Pro. . Если разработка Web-сайтов . В этой главе предложено несколько способов оптимизации файлов изображений для Web с использованием практически любого самого элементарного приложения. что ухудшится качество изображения. сколько изображений используется на вашем сайте. и стоит всего $100.важный этап при создании Web-изображений. Цена на эти приложения больше. которая стоит почти столько же. оптимизировав изображения специально для Интернета. Это .ГЛАВА 28. и графические файлы по-прежнему являются самым узким местом пропускной с пособности. Определение Оптимизация файла изображения для Web означает уменьшение размера файла для более быстрой загрузки. но они стоят того. хуже красивых изображений. поскольку всегда следует помнить о времени загрузки страниц вашего сайта. пора подумать о новой версии программного обеспечения. вам не нужно уменьшать размер файла настолько. при котором качество изображения сохраняется без изменений. которые выглядят отвратительно. которые загружаются слишком долго. упрощенная версия дедушки Photoshop. Если ваши изображения выглядят ступенчатыми. зернистыми или неразборчивыми. В то же время. Не сделайте ошибку: ваши посетители хотят видеть изображения.

следовательно. когда с тем же успехом работают быстрее загружающиеся изображения с низким? . Определение Разрешение файла изображения определяет размер его пикселов: чем больше разрешение. что. Если ваши Web-изображения имеют фотографическое качество. В духе кросс-платформенной совместимости. вся эта дополнительная четкость является мертвым грузом. Оптимизация Web-изображений 165 Совет Более профессиональные приложения для работы с графикой предоставляют ряд других методов для Web-оптимизации. отображают информацию с разрешением 96 ppi (пикселов на дюйм). точнее изображение. Зачем заставлять посетителей загружать изображения с высоким разрешением. тем меньше размер пикселов и. хотя подавляющее большинство мониторов могут отображать информацию с немного более высоким значением. на самом деле. разрешение72 ppi стала стандартом для Web-изображений. Это означает следующее: на экране изображения с высоким разрешением выглядят не лучше изображений. В мире фотографических изображений более высокое разрешение всегда лучше. 300 или 600 ppi. тем больше становится его размер и тем больше времени необходимо для его загрузки. Мониторы компьютеров. 72 ppi. имеющих низкое разрешение . описанных в этой главе.ГЛАВА 28. Посетители не заметят никакой разницы на экране. За дополнительной информацией обратитесь к документации или справочной системе конкретного приложения. что и показано на рисунке 28. работающих под управлением операционной системы Windows. чем более" низкое. Мониторы компьютеров Macintosh отображают информацию с еще более низким разрешением. тем меньше пикселы и резче изображение. скажем. является достаточно низким разрешением. Однако чем больше пикселов используется в изображении. 96 ppi. Оптимизация разрешения Разрешение файла изображения определяет размер его пикселов: чем выше разрешение.1. Но в случае с Web-изображениями возможности отображения экранов мониторов накладывают жесткое ограничение на разрешение изображений.72 или 96 ppi. помимо методов.

чем их копии с низким разрешением. поскольку мониторы имеют относительно низкое разрешение Совет Изображения. будут распечатывать эти изображения. низкую.Строим Web-сайты 166 Часто задаваемые вопросы Почему оптимизированные Web-изображения выглядят зернистыми при распечатке? На экране изображение с разрешением 72 ppi выглядит резким и четким. кто посетит ваш сайт. и включите ссылки на изображения с высоким разрешением. не встраивайте изображения с высоким разрешением в страницы.72 ppi . а не для экрана. для тех. кому они нужны. Изображения с высоким разрешением не выглядят по-другому на экране. Вместо этого используйте изображения с низким разрешением. Чтобы улучшить производительность сайта. однако они гораздо лучше перенесутся при печати. Изображение слева имеет разрешение 600 ppi. . На одном и том же пространстве на печатной странице можно уместить больше точек. 28. поэтому изображения с низким разрешением более отчетливо показывают свою зернистость. Старая добрая бумага на самом деле работает с устройством вывода с гораздо более высоким разрешением.более. что мониторы являются ус гройствами вывода с достаточно низким разрешением. а изображение справа . Однако оба изображения выглядят на экране совершенно одинаково. однако это происходит потому. специально предназначенные для печати посетителями. Puc. оптимизированные для экрана. имеющие фотографическое качество. чем в восемь раз. Однако не все. должны быть оптимизированы для печати.1.

и включите пустое пространство в дизайн страницы. Оптимизация Web-изображений 167 Используя графический редактор. меньшими значениями ширины и высоты). изображение с размерами 60 на 30 пикселов. . не вставляйте в файл изображения чрезвычайно большие объемы пустого пространства. скажем. Это самый простой и наиболее эффективный метод оптимизации изображений для вывода на монитор. В языке HTML вполне выполнимо превратить изображение с размерами 300 на 150 пикселов в.ГЛАВА 28. увеличивающий резкость. Аналогично. используя меньшие изображения. Оптимизация палитр файлов в форматах 6IF и PNG Как вы уже знаете из главы 27. на экране можно разместить больше информации. файлы в форматах GIF и PNG имеют встроенную палитру. чтобы показать подробности. в которой может храниться до 256 цветов. незначительно повлияв на качество изображения.е. Если вашему изображению в формате GIF или PNG необходимы все 256 цветов. Меньшие изображения загружаются быстрее. не используйте браузер для изменения размеров изображения. тем больше размер файла изображения. запустите свой графический редактор и сделайте копию изображения с такими размерами. чем большие. Чем больше цветов хранится в палитре. Иначе браузеру все равно придется загружать больший файл изображения с размерами 300 на 150 пикселов. Вы получите больше пользы от своего Web-сайта. если будете использовать изображения с меньшими физическими размерами (т. Оптимизация размера изображения Пространство экрана напоминает физическое пространство в центре Манхэттена бессмысленно дорогое. которые вы желаете отобразить. Но если вы желаете отобразить изображение с размерами 60 на 30 пикселов. Вместо этого обрежьте изображение до размеров. и сайт будет лучше выглядеть на компактных дисплеях портативных устройств. настроив значения атрибутов w i d t h и h e i g h t тега img (за более подробной информацией обратитесь к главе 29). Однако для большинства файлов в форматах GIF и PNG можно избавиться от некоторых цветов. перед тем как пользователи пролистают страницу. уменьшите разрешение всех Web-изображений до стандартного разрешения 72 ppi. И хотя меньшие изображения лучше. Совет При уменьшении изображения пропустите изображение с измененными размерами через фильтр. так тому и быть. Кроме того. и вы ничуть не уменьшите время загрузки.

например. имеющих квадратную форму. который создает иллюзию плавности путем вставки слегка размытых пикселов вдоль криволинейного края. Удаление большого количества цветов из палитры снижает эффективность сглаживания. который видит гладкие. Вместо этого формат JPEG сжимает информацию в изображении. какое значение качества подходит лучше всего. Оптимизации сЖатия изображении 6 формате JPE6 Изображения в формате JPEG не имеют палитр. и обманывает глаз. Хорошие графические приложения позволяют указывать степень сжатия файла в формате JPEG путем настройки его качества. JPEG. плавных кривых путем вставки слегка размытых пикселей вдоль криволинейного края. за которой качество изображения существенно ухудшается. Определение Сглаживание . Не существует твердого правила для настройки наилучшего качества. делая ее более эффективной и отбрасывая информацию. Когда вы достигли этой точки. уменьшает размер файла изображения. которую человеческий глаз скорее всего не заметит. Все зависит от количества информации в файле в формате JPEG. и качество изображения заметно ухудшается. содержащими закругленные или криволинейные фшуры. просто вернитесь назад на один уровень сжатия. Слишком большое сжатие избавляет от огромного количества информации и качество изображения заметно ухудшается. Слишком большое сжатие избавляется от огромного количества информации. называемый сглаживанием. Для каждого размытого оттенка необходимо место в палитре изображений в формате GIF или PNG. Для оптимизации файла в формате JPEG поиграйте с уровнем сжатия и посмотрите. Определение Сжатие в графическом формате. Обычно существует точка. отбрасывая часть визуальной информации.Строим Web-сайты 168 Будьте осторожны с изображениями. В таких изображениях часто используется метод. которые имеют изображения в формате GIF и PNG. Сглаживание минимизирует естественное блочное отображение пикселов. плавные кривые.это метод создания видимости гладких. .

jpg" width="150" height=-"75"> Рис. Изменив значения атрибутов width и height.2.1. указываются точные размеры изображения с использованием атрибутов width и height тега img. 29.1. При добавлении изображения на страницу. поддерживающие изображения. чем просто отображать графику. могут делать больше.1 <img src = "logo.ГЛАВА29. Листинг 29. как правило. как вы разработали его в приложении. предназначенном. Трансформация изображений с использованием атрибутов языка HTML Браузеры. для работы с графикой Рис. Они также могут изменять их физические размеры. как показано на рисунке 29. и изображение появится на странице в точности. Укажите точные размеры изображения в теге img. 29.1. вы трансформируете изображение при помощи языка HTML . Просмотр исходного кода для рисунка 29.

растянув его ширину или высоту.2. 29. можно изменить размеры изображения при помощи языка HTML Однако используйте эти хитрости благоразумно. как показано на рисунке 29. j p g " width="300" height="150"> mylOCO Рис. как вы трансформируете это изображение при помощи языка HTML. как и если сделать изображение большим. Пропорционально увеличив или уменьшив значения атрибутов width и heigh t.170 Строим Web-сайты Но кто сказал. предназначенном для работы с графикой.это программа Photoshop для бедных. . и вы определенно получите то. j p g " width="300" height="35"> И пропорционально увеличив или уменьшив значения атрибутов width и height. Просмотр исходного кода для рисунка 29. Однако для едва различимых местных изменений трансформации языка HTML в целом работают прекрасно.3 <img s r c = " l o g o . Совет Для чрезмерных трансформаций.3. что вы обязаны указывать реальные размеры изображения? Можно трансформировать изображение. Язык HTML . за что заплатили. как показано на рисунке 29. лучше редактировать изображения в приложении. Браузер всегда загружает исходный файл с нормальными размерами. результаты трансформации изображения в специализированной программе для работы с графикой выглядят лучше.3. И если сделать изображение меньшим при помощи языка HTML. Как правиио. которые представлены на рисунках 29. Листинг 29. Просмотр исходного кода для рисунка 29. 'Листинг 29.2 <img s r c = " l o g o . независимо от того. наподобие тех.2 и 29. это не увеличит времени загрузки. это не изменит времени его загрузки. можно изменить размеры изображения.3.2.3.

1. в которой отображается внутристрочное изображение. Ими в основном являются изображения с содержимым.1. Совет Внутристрочные изображения . You won't believe what w e ' l l come up with next.gif" width="47" height="84"> in the industry.1.</p> Атрибут a l ign тега img помогает разместить изображение более эффективно.это изображения. где вы хотите отобразить изображение.это изображения. отображаемые внутри блока текста. которые обычно имеют свои собственные ячейки таблиц или CSS-разделы в макете страницы. Если высота изображения больше высоты окружающего текста в пунктах. но не очень эстетически приятным. центру или низу строки текста. out-of-the-box. c r e a t i v e . We offer the most i n t e r e s t i n g . браузер разделит строки текста самым непривлекательным способом. как показано на рисунке 30. Размещение Внутристрочных изображений при помощи языка HTML Внутристрочные изображения . including the p r e s t i g i o u s Nobel P r i z e . We have won several i n t e r n a t i o n a l awards for our ideas alone.ГЛАВАЗО. Как можно заметить. отображаемые внутри блока HTML-текста. Определение Сделать внутристрочное изображение плавающим означает разместить его с левой или правой стороны блока текста. например.2. кнопкам навигационной панели и другим элементам графического интерфейса. . and forward-thinking ideas <img src="images/bulb. Просто выберите значение атрибута a l i g n из таблицы 30. чтобы изображения плавало с левой или правой стороны всего блока текста. Можно сделать так. Листинг 30. y o u ' l l be amazed at the r e s u l t s . как показано на рисунке 30.1 <h2>A complete b r a i n . в противоположность логотипам. Простейшим способом добавления внутристрочного изображения в языке HTML является вставка тега img как раз в том месте текста. диаграммы. или можно выровнять изображение вертикально по верху.t r u s t solution</h2> <p>When you consult with us. это метод является работоспособным. You simply won't find b e t t e r ideas anywhere. который можно себе представить. Просмотр исходного кода для рисунка 30. чтобы текст обтекал это изображение. графики и фотографии.

Размещение тега img внутри блока атрибута align тега изображения текста создает внутристрочное изображение. 30. You won't believe what we'll come up with next. you'll be amazed at the results.2. A complete brain-trust solution 9 When you consult with us. 30. W e offer the most interesting. переместите тег img в начало блока текста. Puc. out-of-the-box. Значения атрибута align тега img Значение Результат bottom Вертикально выравнивает низ изображения по низу или по ба. We have won several international awards for our ideas alone. and forward-thinkjng ideas in the industry You won't believe what we'll come up with next We have won several international awards for our ideas alone. including the prestigious Nobel Prize. creative.2.2. and forward-thinking ideas in the industry. как разместить однако браузер разделяет строки текста изображение относительно без всякой искусной утонченности окружающего текста Листинг 30.</p> Табл.Строим Web-сайты 172 A complete brain-trust solution \When you consult with us. creative. Использование Puc. you'll be amazed at the results. including the prestigious Nobel Prize You simply won't find better ideas anywhere.2 <h2>A complete brain-trust solution</h2> <pximg src="images/bulb.1.gif" width="47" height="84" align="left"> When you consult with us. . out-of-the-box. You simply won't find better ideas anywhere. including the prestigious Nobel Prize You simply won't find better ideas anywhere. We offer the most interesting. сообщает браузеру. к >вой линии строки текста left Делает изображение плавающим с левой стороны блока текста middle Вертикально выравнивает изображение по центральной строке текста right Делает изображение плавающим с правой стороны блока текста top Вертикально выравнивает верх изображения по верху строки текста Совет Чтобы внутристрочное изображение плавало с левой или правой стороны блока текста. outof-the-box. cieative. you'll be amazed at the r e s u l t s . and forward-thinking ideas in the industry ' Y o u won't believe what we'll come up with next We have won several international awards for our ideas alone. ЗОЛ. Просмотр исходного кода для рисунка 30. We offer the most interesting. как показано в листинге 30.

а определение f l o a t : r i g h t . что браузеры регулярно теряют сознание от таблиц CSS везде.1.</p> . связанными с дизайном и форматированием.1. File Ее* View Favorites Iwls A complete brain-trust solution ^ When you consult with us.1. out-of-the-box. определение CSS-стиля f l o a t : l e f t . как показано на рисунке 31.ГЛАВА31. Достаточно просто превратить внутристрочное изображение в плавающее при помощи таблиц CSS Листинг 31. Просмотр исходного кода для рисунка 31. чем атрибут a l i g n . Первый шаг заключается в превращении внутристрочного изображения в плавающее рядом с блоком текста. you'll be amazed at the results We offer the most resting.gif" width="47" height="84" style="f loat: left.">When you consult with us. and forward-thinking ideas in the industry ' You won't believe what well come up with next We have won several international awards for our ideas alone. and forward-thinking ideas in the industry.1 <h2>A complete brain-trust solution</h2> <pximg src = "images/bulb. где находят их. что таблицы CSS предоставляют больше возможностей. Плавающие внутристрочные изображения с использованием таблиц CSS Как и со всеми вопросами. Положительным моментом является то. You won't believe what we'll come up with next. you'll be amazed at the results. creative. including the prestigious Nobel Prize You simply won't find better ideas anywhere. размещает изображение с левой стороны блока текста. out-of-the-box. поэтому необходимо проверять свои CSS-стили на множестве браузеров. We offer the most interesting. You simply won't find better ideas anywhere. Как можно догадаться. We have won several international awards for our ideas alone. including the prestigious Nobel Prize. в наши дни политически корректным методом для создания плавающих внутристрочных изображений является не присваивание значений l e f t или r i g h t атрибуту a l i g n тега img (за дополнительной информацией обратитесь к главе 30). 31. а использование каскадных таблиц стилей (CSS). размещает изображение с правой стороны. Отрицательным моментом является то. creative. Рис.

31. Веселье начинается. A complete brain-trust solution When you consult with us. including tiie prestigious Nobel Prize. won't b e l i e v e what w e ' l l come up with next.ults You won't believe what we'll come up with We have won several international awards for our ideas alone."> width="47" • height="84" style="float: <p>When you consult with us.2. второй блок красиво обтекает плавающее изображение. текст будет вынужден располагаться прямо под левым плавающим изображением . Обычно при разбивании текста на два блока. you'll be amazed at the :sults You won't believe what well come up with next We have won several international awards for our ideas alone. Просмотр исходного кода для рисунка 31.3.2. Листинг 31. Если запретить обтекание второго абзаца елевой стороны.174 Строим Web-сайты Пока все хорошо. including the prestigious Nobel Prize We have won more awards Ihan any other brain trust in the greater Cleveland area You simply won't find better ideas anywhere In fact. то он будет расположен прямо под левым плавающим изображением вместо того.gif" left. но таблицы CSS не дали нам ничего.t r u s t solution</h2> <img src="images/bulb. we guarantee it How's that for a great idea? Puc. 31. когда сплошной блок текста разбивается на две или более части. нить способ обтекания плавающего изображения дополнительными блоками текста. чего бы мы не смогли сделать при помощи атрибута a l i g n тега img.</p> You <p>We have won s e v e r a l i n t e r n a t i o n a l awards for our ideas alone. You simply won't find better ideas anywhere Puc.2. including the p r e s t i g i o u s Nobel P r i z e . чтобы обтекать это изображение. Вы сможете изме-. y o u ' l l be amazed a t the r e s u l t s . как показано на рисунке 31. you'll be amazed at the .2 <h2>A complete b r a i n .3.</p> Eto Edit ttew Favorite* Ioois Mdp A complete brain-trust solution When you consult with us. как и первый Так. You simply won't find better ideas anywhere. если запретить обтекание нового абзаца с левой стороны. как показано на рисунке 31.

31. Плавающие внутристрочные изображения 175 Листинг 31.</p> Чтобы увидеть."> width="47" height="84" style="float: <p>When you consult with us. you'll be amazed at the r e s u l t s ."> width="47". добавим еще одно внутристрочное изображение.">We have won several international awards for our ideas alone. including the prestigious Nobel Prize. You won't believe what we'll come up with next. A complete brain-trust solution "\When you consult with us. We have won more awards than any other brain trust in the greater Cleveland area. что здесь происходит.">We have won several international awards for our ideas alone.</p> <img src="images/bulb. You simply won't find better ideas anywhere. You simply won't find better ideas anywhere. How's that for a great idea?</p> .gif" left. После добавления левого плавающего изображения второй абзац обтекает его. "> ' width="47" height="84" style="float: <p styie="clear: left.4.4. In fact. We have won several international awards for our ideas alone.ГЛАВА 3 1 . we guarantee i t .3. что абзац не должен обтекать только изображения слева Листинг 31. including the prestigious Nobel Prize We have won more awards than any other brain trust m the greater Cleveland area. you'll be amazed at the r e s u l t s . you'll b e amazed at the -esuks You won't believe what we'll tome up with next. we guarantee it How's that for a great idea? Рис. поскольку было указано. Просмотр исходного кода для рисунка 31. You won't believe what we'll come up with next.4 <h2>A complete brain-trust solution</h2> <img src="images/bulb. Просмотр исходного кода для рисунка 31. однако он обтекает правое плавающее изображение.</p> <p style="clear: left.gif" right. height="84" style="float: <p>When you consult with us. и на этот раз сделаем его плавающим с правой стороны.4. You simply won't find better ideas anywhere In fact. including the prestigious Nobel Prize. Второй абзац начинается прямо под левым плавающим изображением.3 <h2>A complete brain-trust soiution</h2> <img src="images/bulb.gif" left. как показано на рисунке 31.

1 приведены CSS-стили для создания плавающих изображений и для за1 [рещения обтекания. исright. Запрещает обтекание блоком текста предыдущих левых плавающих изображений c l e a r : right. Запрещает обтекание блоком текста предыдущих левых и правых плавающих изображений clear: left... Создает плавающее изображение с правой стороны последующих блоков текста . Запрещает обтекание блоком текста предыдущих правых плавающих изображений float: left.1. Создает плавающее изображение с левой стороны последующих блоков текста float: right. 31. В таблице 31. Табл. используйте определение стиля c l e a r : both. Создание плавающих изображений и запрещение обтекания при помощи таблиц CSS Стиль Результат clear: both. пользуйте определение clear: Если вы хотите для второго абзаца запретить обтекание плавающих изображений справа и слева.Строим Web-сайты 176 Совет Чтобы запретить обтекание правого плавающего изображения.

обычно определено два состояния кнопки: состояние по умолчанию. и состояние onMouseOver. . Следовательно. а не улучшать удобство использования. Не нужно противоречить психологии .) Сайты. определяющее. как выглядит кнопка. производит переключение между этими двумя состояниями.делать обратное тому. и визуальная обратная связь будет создавать путаницу. как выглядит кнопка. мы хотим. что ожидает разум посетителя. которые принимает графическое изображение кнопки в зависимости от вида взаимодействия посетителя с кнопкой.это различные представления. Вот теория: разрабатывайте состояния кнопок с увеличением энергии. написанная на языке JavaScript. которые принимает графическое изображение кнопки в зависимости от вида взаимодействия посетителя с кнопкой. Другими словами. в котором работает разум посетителя. Состояние . Web-странице. как выглядит кнопка в обычных условиях. Часто задаваемые вопросы ЧТО за странная терминология для состояний кнопки? Вините язык JavaScript. чтобы визуальные эффекты соответствовали направлению. Состояния кнопки обеспечивают бесценную визуальную обратную связь на обычной. Когда такой большой объем содержимого переполняет типичное окно браузера. выполнение действий в ответ на перемещение указателя мыши или щелчки помогают посетителям понять. Имена для событий кнопки onMouseOver и onCl i ck произошли от соответствующих событий в языке JavaScript. Когда наступает время разрабатывать состояния для своих кнопок. построенные на базе технологии Macromedia Flash. основанного на языке DHTML. обычно включают третье состояние: состояние onclick. Определение СОСТОЯНИЯ КНОПКИ .это различные представления. Каждое последующее состояние кнопки должно «подниматься на ступеньку выше». что происходит. в которой посетитель взаимодействует с кнопкой. как использовать ваш сайт. Для Web-сайта. Разработка состояний кнопок СОСТОЯНИЯ КНОПКИ .иначе ваш сайт будет посылать сбивающие с толку сообщения. когда посетитель наводит на нее указатель мыши.ГЛАВА 32. определяющее. состояние по умолчанию должно иметь наименьшее количество энергии. когда посетитель щелкает на ней. поскольку посетитель совсем не взаимодействует с ним. мы хотим извлечь выгоду из психологии того. следуя логической последовательности. наводненной ссылками. (Ролловерная функция. определяющее.

которую генерирует посетитель. . пока не будет выключено питание. когда посетитель взаимодействует с ними. а на рисунке 32. чего интуитивно и ожидает посетитель . как плохая территория в фильме «Star Trek».1 собраны некоторые предложения. Рис. Что точно будет происходить. Все.это графически дублируем способ функционирования реального объекта. В этих последовательностях состояний кнопок используется переход от низкой энергии к более высокой. Это не создает наглядного восприятия.1.тодиод компьютера не гаснет. когда включается питание. 32.1 показано несколько последовательностей состояний кнопок. Свс. И состояние o n c l i c k (если у вас есть такое состояние) должно подниматься еще на одну ступеньку. Сколько графических кнопок вы видели в Интернете до сих пор. как будто кнопка впитывает кинетическую энергию. и продолжает гореть всю ночь. кажется. что-то происходит. которые как будто выключались при наведении на них мыши? Если вы разрабатываете кнопки. завис и г от вас. Когда появляется энергия. что мы делаем здесь. соответствующую дополнительной кинетической энергии. получаемой при щелчке мышью. перемещая мышь. что кнопки поглощают энергию и противоречат законам физики. наподобие механизма: появляется энергия и что-то происходит.178 Строим Web-сайты onMouseOver должно подняться на ступеньку выше. которые опускаются на ступеньку ниже. но в таблице 32.

. • Увеличить размер кегля текста метки. чтобы кнопка выглядела нажатой. • Добавить маркер с левой стороны текстовой метки. ярче цвет текстовой • Сделать так. Разработка состояний кнопок 179 Табл. Добавить маркер к текстовой метке (если он не был еще добавлен в состоянии onMouseOver). Совет Подойдите творчески к разработке дизайна для состояния onMouseOver. 32. • Сделать ярче цвет лицевой части кнопки. • • Подчеркнуть текстовую метку. который изменили или добавили в состояние onMouseOver. • Подтолкнуть всю кнопку целиком или только текстовую метку внутри кнопки. что мы хотим сделать. чтобы кнопка выглядела нажатой.е. Дизайнерские предложения для состояний кнопок Состояние onMouseOver (Подсвечивание) Состояние onClick (Активация) • Сделать метки.т. Имитация нажатия кнопки является самым наглядным способом сообщить посетителям. хотя на самом деле она была только подсвечена.ГЛАВА 32. Создать анимацию быстрой вспышки цвета в элементе. и не важно к какой оригинальной идее вы пришли для состояния onMouseOver. сделайте так. поскольку он наводит посетителя на мысль. • Добавить подчеркивание текстовой метки (если оно не было 'добавлено в состояние onMouseOver). Совет Не используйте дизайн нажатой кнопки для состояния onMouseOver. что кнопка была активирована (т. Сделать так. • • Изменить форму или размер маркера текстовой метки (если маркер присутствует в состоянии по умолчанию). заключается в подсвечивании кнопки. на ней щелкнули). Серьезно отнеситесь к состоянию onCl ickn используйте типичную кнопочную метафору нажатия . построенных по технологии Flash. чтобы кнопка выглядела полностью включенной (если состояние onMouseOver выглядит не полностью включенным).е. что они только что активировали кнопку. • • Добавить рамку или свечение вокруг кнопки. поскольку то. Поберегите дизайн нажатых кнопок для состояния onclick для сайтов.1.

Все достаточно просто: функция находит изображение. поскольку у посетителя не создается впечатление. Они даже не обязаны иметь одинаковые физические размеры. заставляющим работать роловер. для создания ролловерной графики необходимы три вещи: 1. или с версии для состояния onMouseOver обратно на версию по умолчанию. . который поддерживается самыми последними версиями наиболее популярных браузеров. Они не обязательно должны выглядеть похожими. Итак. Вместо этого существует два отдельных файла изображения. Файл изображения по умолчанию или нормальное состояние ролловера.. Определение Ролловерная графика . Дополнительная визуальная обратная связь. которые изменяют свой вид. которое появляется. Для ролловера можно использовать любые два файла изображений. поскольку само изображение не изменяется. когда графические файлы являются различными версиями одного и того же изображения с одинаковыми размерами. 2. JavaScript-функция является секретным ингредиентом. и JavaScript-функция вытягивает предыдущее состояние.ГЛАВА гг. меняя местами эти два изображения в зависимости от позиции указателя мыши. Этот эффект на самом деле является неким волшебным фокусом. Создание ролловерной графики Ролловерная графика . когда посетитель наводит на него указатель мыши. и затем изменяет источник этого изображения с версии по умолчанию на версию для состояния onMouseOver. что на кнопке можно щелкнуть. по его коду идентификатора. выполняющая смену изображений. усиливает ощущение. которое изменяет свой вид. когда посетитель наводит на них указатель мыши. благодаря ролловерному эффекту. когда посетитель наводит указатель мыши на ролловер. Совет Ролловерная графика отлично подходит для кнопок навигационной панели. которое вы желаете сменить на другое. 3. Файл изображения для состояния onMouseOver или изображение. ролловеры работают лучше всего. и вы получаете лучшую последовательность. В основе функции лежит чрезвычайно полезный метод getElementByld. JavaScript-функция. Ролловерный эффект создает таким образом некий вид анимации. что изображение по умолчанию пропадает или радикально изменяется. И все-таки.это изображение.это изображения.

src = imageSource.getElementById(imagelD). и вы получите стробоскопический эффект. <html> <head> <title>Rollover Graphics</title> <script language="JavaScript"> function doRollover(imagelD. если изображение для состояния onMouseOver будет иметь другие размеры. на которое вы хотите произвести замену). ролловерное изображение застряло бы на состоянии. что указатель мыши оказался за пределами области изображения для состояния onMouseOver. а событие onMouseOut переключает состояния обратно. Иначе браузер вставит изображение для состояния onMouseOver как есть и перерисует весь экран целиком. В таком случае. Единственная инструкция языка JavaScript использует оба параметра для выполнения трюка. imageSource) { /* Эта функция принимает два параметра: imagelD (ID изображения. которое вы хотите заменить) и imageSource (путь к файлу изображения.ГЛАВА 33. чтобы они соответствовали размерам изображения по умолчанию. браузер изменит размеры изображения для состояния onMouseOver. —> . куда посетитель переместил указатель мыши. ролловерная функция автоматически возвратит обратно изображение по умолчанию. И еще более неприятно. */ document. Инструментарий Ролловерная графика Данный DHTML-документ демонстрирует создание ролловерного эффекта. Создание роловерной графики 181 Совет Для получения наилучших результатов всегда указывайте значения атрибутов width и height тега img ролловерной графики. </script> </head> <body> <!— Для этой'демонстрации здесь используется только одно ролловерное изображение. однако тело документа можно заполнить любым желаемым содержимым. Если бы не было события onMouseOut для возврата к обычному состоянию. Событие onMouseOver переключает состояние по умолчанию на состояние. когда указатель мыши наведен над изображением. чем изображение по умолчанию. Ролловерную функцию вызывают два различных события языка JavaScript. когда над изображением наведен указатель мыши. если изменение размеров привело к тому. независимо от того.

когда указатель мыши наведен на изображение. например. Для обычнсго ролловера. imagepath .это путь к версии изображен л? для состояния. Для разъединенного ролловера. которое является изображением для замены с мспользованием ролловерной функции. rolloverid совпадает с imageid.jpg.это уникальная строка. —> </body> </html> ." onMouseOut="doRollover('rolloverid'. путем относительно корня или абсолютным путем. Заключайте весь путь в одинарные кавычки.это путь к изображению. rolloverid является идентификатором любого изображения. imgOl или happyface. 'mouseoverimagepath'). Для обычного ролловера. .это идентификатор целевого изображения. Каждому изображению на странице присваивайте различные идентификаторы.это путь к версии изображения по умолчанию. например."> 'default- <!— Примечания: imageid . imagepath'). идентифицирующая изображение.это ширина и высота rolloverid . defaultimagepath .Строим Web-сайты 182 Инструментарий <img id="imageid" s гс = "imagepath" width="imagewidth" height="imageheight" onMouseOver="doRollover( 'rolloverid' . путем относительно корня или абсолютным путем. которое вы хотите изменить. Путь может быть путем относительно документа. images/icecream. Для разъединенного ролловера. defaultimagepath совпадает с imagepath. Этот путь может быть путем относительно документа. путь может быть путем относительно документа. imagewidth и imageheight изображения в пикселах. и обязательно заключайте весь путь в одинарные кавычки.jpg. например. mouseoverimagepath . i images/icecream_ro. Обязательно заключайте это значение в одинарные кавычки. Опять-таки. путем относительно корня или абсолютным путем. defaultimagepath совпадает со значением атрибута src целевого изображения.

Чтобы сделать это.gif или button_over. Об идентификаторах: если вы не можете определить. img. Совет Несколько слов по терминологии: окажите себе услугу и назовите изображение для состояния onMouseOver так же. например. которая имеет для вас смысл. __го или jbver. Один из редакторов данной книги предпочитает систему. изображение для состояния onMouseOver будет называться button_ro. Используйте любую систему. а не собственный идентификатор инициирующего изображения. что необходимо использовать либо ту. Но все дизайнеры согласны. которое вы хотите изменить. или изображения.gif. которое инициирует роловерный эффект не для себя. imgO2. В качестве идентификаторов можно использовать имена файлов изображений. если изображение по умолчанию называется button. просто воспользуйтесь общим префиксом. Конечно. imgO3 и так далее. например. Так. определите события onMouseOver и onMouseOut в инициирующем изображении.gif для ролловера. если такое изображение встречается на странице всего один раз. Это поможет вам отслеживать изображения. но в качестве параметра функции укажите идентификатор изображения. каждое изображение должно иметь уникальный идентификатор. различные дизайнеры имеют различные предпочтения по именованию своих изображений.gif. либо другую систему. но только в том случае. какие идентификаторы использовать. добавив суффикс. подобную следующей: имя NavHomeOff. . Помните.gif для изображения по умолчанию и имя NavHomeOn. и пронумеруйте ваши изображения подобным образом: imgO1. Создание роловерной графики 183 Совет Эту же функцию можно использовать для создания разъединенного ролловера.ГЛАВА 33. а абсолютно другого изображения. как и изображение по умолчанию.

что в описании не урезаются детали. чтобы более точно индексировать ваш сайт. что текст выполняет достаточно хорошую работу для подачи визуальной информации.значение атрибута a l t тега img. выпадает участь писать такие описания самому и вставлять их в HTML-код. вообразите. которые уже слышали это описание. Вам. чтобы отыскать текст на странице и преобразовать его в произносимые слова или шрифт Брайля.ГЛАВА 34. В предыдущем примере вы видели. которую визуально представляет изображение. что мы хотим передать в описании ту же информацию. например. Повышение доступности изображений Добросовестные Web-дизайнеры делают свой Web-сайты максимально совместимыми со средствами специальных возможностей.' Обратите внимание. когда вы будете добавлять текстовые описания для атрибута a l t ваших изображений. что пишете сочинение. как могут сказать в отделе рекламы. Поверхность Нептуна кажется кобальтово-синей яркими полосами сероголубых облаков. как в следующем коде: <img src = "neptune. чтобы ваше описание вызывало изображение в мысленном взгляде. Вам нет смысла добавлять описание. чтобы помочь инвалидам по зрению. Поэтому добавление осмысленного текста для атрибута alt может помочь в повышении ранга вашего сайта среди результатов поиска. . поскольку в нем недостаточно деталей для вызова изображения Нептуна в мысленном взгляде. преобразователями текст-речь и преобразователями текст-шрифт Брайля. Сделать HTML-текст доступным просто ."> Совет В качестве дополнительного бонуса. Однако пока не существует технологии для таких средств. позволяющей исследовать содержимое изображения и создать доступное описание. Сделайте так. подобное следующему: <img src = "neptune.вам вообще ничего не нужно делать для этого. Средства специальных возможностей достаточно сообразительны. некоторые поисковые машины специально ищут текст в атрибуте alt. читателями экрана. создателю Web-сайтов. Поэтому. Идея заключается в предоставлении инвалидам по зрению сопоставимого впечатления об изображении. Описание помещается в. jpg" width="'3OO" height = "150" a l t = "Изображение планеты Нептун. jpg" тун " > width="300" height = "150" a l t = "ItaaHeTa Неп- Такой немногословный текст может вызвать споры относительно точности данного описания. полученное с помощью космического телескопа Hubble. Инвалиды по зрению. Это означает. чтобы читатели экрана и подобные им могли найти эти описания.

диаграмм. Совет Обязательно предоставляйте текстовые описания для всех изображений на странице. Однако непременно предоставляйте очень подробные описания для иллюстраций. поэтому ваше описание должно делать то же самое. Кто-то. логотипов или кнопок. как выглядит эта планета. как выглядит Нептун. поскольку само изображение не создает предварительных предположений. Для чисто функциональных изображений. . может посмотреть на изображение и узнать. чтобы иметь сопоставимое впечатление об изображении. Повышение доступности изображений 185 вынуждены знать. например. или для изображений. кто никогда до этого не видел планету Нептун. графиков и других изображений с содержимым.ГЛАВА 34. что доставляет им неудобство. детальные описания не обязательны: описания кнопок «О нас» или «Начальная страница» прекрасно справятся с задачей. которые имеют смысл или раскрывают суть текста на странице.

Превращает изображение в карту ссылок блок HTML-кода. 2.htm"> href="marsO2.1 <img src="images/mars. Каждый гиперобъект функционирует. что в теге img используется атрибут usemap. если разделить изображение и его код.148" <area shape="rect" coords="172. определяющего гиперобъекты. Объедините их. называемых гиперобъектами. без перемещения при этом блока кода. какое определение карты применить. который сообщает браузеру. определяющий форму.это изображение.ГЛАВА 35.328. Ссылки могут указывать на различные страницы или выполнять различные скрипты. На странице можно иметь любое число карт ссылок и даже можно использовать одно и то же определение для абсолютно разных изображени i. то карта ссылок превратится обратно в обычное старое доброе изображение без ссылки. Можно начать с любого Web-изображения.jpg" width="500" height="300" usemap="#mars"> <!— Начало определений гиперобъектов —> <map name="mars"> <area shape="rect" coords="9. положение и функционирование гиперобъектов.htm"> . Итак. Самого файла изображения. Листинг 35. Определение Карта ссылок . карта ссылок состоит из двух частей: 1. чем обычные старые добрые изображения со ссылкой. содержащее одну или несколько гиперобластей.2. в которых изображение целиком функционирует.1. а не в самом изображении. что делает карты ссылок более полезными.149" href="mars01.3. Перемещение изображения на другую страницу. Совет Поскольку гиперобъекты определяются в HTML-коде. приведет к отображению неактивной карты ссылок. определяющего гиперобъекты. Просмотр исходного кода для рисунка 35. Создание карт ссылок Карта ссылок . и вы получите что-то похожее на рисунок 35. Блока кода.164.это изображение. содержащее один или несколько гиперобъектов или гиперобластей. В карте ссылок сам файл изображения не представляет ничего особенного. Обратите внимание. как одна ссылка.1. как отдельная ссылка.

Каждый гиперобъект карты ссылок получает свой собственный тег a r e a .149" href="marsO3.296"- href= <area "marsO6. атрибуты тега a r e a определяют. В таком случае вы всегда будете знать. а значение атрибута name не имеет префикса.152. Как можно предположить. если у нас есть шесть гиперобъектов.295' href = </map> < l. однако наиболее подходящим местом является конец HTML-документа. как показано на рисунке 35. которое бросается в глаза: в значении атрибута usemap перед именем определения ставится символ числа (#).htm"> shape="rect" coords="334. Эти теги a r e a могут идти в любом порядке. Ms H* Рис.487.151.5. нам понадобится шесть тегов a r e a .1. Карты ссылок состоят из файла изображения и блока HTML-кода.153. где и как будут располагаться гиперобъекты: .Конец определений гиперобъектов —> Bis E* Bew Favorlo.488. Значение атрибута name тега т а р соответствует значению атрибута usemap тега img. за одним исключением.294" href="marsO4.ГЛАВА 35.htm"> shape="rect" coords="171. Таким образом. 35. Само определение находится между тегами тар. если понадобится их изменить или переместить на другую страницу.htm"> <area "marsO5. где искать определения карт ссылок.1.htm"> <area shape="rect" coords="9. определяющего гиперобъекты Совет Теги map можно размещать в любом месте HTML-документа. Создание карт ссылок 187 <area shape="rect" coords="334.163.327.

Левый верхний угол любого изображения имеет координаты (0. Также существуют серверные карты ссылок. Изображения с определениями.Строим Web-сайты 188 Атрибут shape определяет. Его значением может быть путь к новой странице. как их клиентские родственники. Однако серверные карты ссылок являются более громоздкими для программирования. и теперь все основные браузеры поддерживают клиентские карты ссылок. значения атрибута coords имеют разный смысл (обратитесь к таблице 35.1). однако использование одного имени является удобным способом отслеживания. вероятно. для которых HTML-код содержит определения гиперобъектов. . Атрибут coords определяет положение и размер гиперобъекта. Совет Название карты ссылок не обязательно должно соответствовать названию файла изображения. меньше зависят от браузера. какая карта ссылок соответствует какому изображению. или оно может открывать пустое окно электронного сообщения (href="mailto:mars@email.0). чтобы ваши области гиперобъектов не перекрывались. И хотя раньше серверные карты ссылок были стандартом. "). какая форма гиперобъекта из трех возможных используется: прямоугольник (rect). определяющего гиперобъекты. Совет Следите. Они не выполняются также быстро. Когда случается такая ситуация. поскольку не нужно заботиться о перенесении блока HTML-кода. Правый нижний угол изображения с размерами 500 на 300 пикселов имеет координаты (500.eml") или запускать скрипт (href =" j a v a s c r i p t :doMars () . браузеры сбиваются с толку и карта ссылок. они почти исчезли. окружность ( c i r c l e ) или многоугольник (poly). Часто задаваемые вопросы Как насчет серверных карт ссылок? В этой главе описываются клиентские карты ссылок. В зависимости от значения атрибута shape. размещенными на сервере. для которых определения гиперобъектов размещаются в отдельном файле на Web-сервере. и их невозможно сделать доступными.300). Атрибут href содержит ссылку гиперобъекта. будет работать неправильно. и их проще переносить со страницы на страницу.

го угла.150" coords="275.50.70" href="marsO3. Координата х точки фигуры.htm"> <area shape="circle" coords="410.70" href="marsO6.450. 6 и всегда кратно 2 координата у точки фигуры (повторяется столько раз. координата х правого нижнего угла. Гиперобъекты не обязательно должны иметь одинаковую форму. 200.jpg. 1 0 0 . сколько точек фигуры необходимо для описания многоугольника) rect Всегда 4 coords="100.76. Табл.c o o r d s = " 0 . Смысл значений атрибута coords Форма Число координат Смысл Пример circle Всегда 3 Координата х центральной точки. 300.12.225.150.htm"> <area shape='"circle" coords = "245 . 35.20" poly По меньшей мере. 400.100.htm"> <area shape="circle" coords="410.70" href = "marsO5 . <area shape="circle" coords="85.76. просто измените значение атрибута shape и обновите координаты: <img s r c = " i m a g e s / m a r s .225 . если вы хотите использовать круглые гиперобъекты вместо прямоугольных для изображения mars. Создание карт ссылок 189 Итак.50.координата у центральной точки.76.70" href="mars04. координата у левого 150" верхнего угла.htm"> . координата у правого нижнего угла .100.50" Координата х левого верхне.1.225.ГЛАВА 35.htm"> </map> <!— Конец определений гиперобъектов —> Совет В одной карте ссылок можно смешивать и сочетать формы.150. 0 .60" href="mars01. j p g " width="500" h e i g h t = " 3 0 0 " usemap="#mars"> <!— Начало определений гиперобъектов —> <map name="mars"> <area shape="clrcle" coords="85.70" href="marsO2. радиус окружности в пикселах coords="10.htm"> <area shape="circle" coords="245.150.350.

что изображено на картинке. 296" hre£= <area shape="rect" "marsO6. как вы сделали бы это для любого другого изображения на сайте: <img src="images/mars.2.488.htrr. что для более доступной карты ссылок требуется как общее текстовое описание.153. Поэтому понятно.151.149" •alt="Phase 2"> .327 . Средства специальных возможностей. как показано на рисунке 36. 5 .164. и посетитель.487 . которые не отображают изображения. читатели экрана.htm" alt="Phase 5"> coords="171. так и текстовые описания для каждой гиперобласти.htu.152." alt="Phase 1"> <area shape="rect" coords="172. чтобы текстовые браузеры или другие устройства.htir. что для улучшения доступности изображения пишется подробное текстовое описание. консорциум World Wide Web (W3C).him" <area shape="rect" coords = "334 . например. Однако карта ссылок является особым случаем.328. особым образом выбирают текст.ГЛАВА 36.1.jpg" width="500" height="300" usemap="#ma: =" alt="An image map showing the d e c l i n e of surface water on the planet Mars. href="marsO2. имеющий проблемы со зрением.148" href="mars01. точно так же." <area shape="rect" coords = "9 . советует включать дублирующие текстовые ссылки для гиперобластей карты ссылок с тем.294" alt="Phase 4"> href = "marsO4 . поскольку это не просто изображение. Используйте атрибут a l t тега img. слышит вербальное описание того. могли без труда получить доступ к содержимому карты ссылок.295" href= </map> Наш любимый комитет стандартов."> Атрибут a l t тега area прекрасно подойдет для текстового описания гиперобластей: <map name="mars"> / <area shape="rect" coords="9. которые функционируют. В любом случае добавление небольшого количества текстовых инструкций не повредит.3. чтобы задать текстовое описание для всего изображения. Карта ссылок объединяет изображение с гиперобластями. как ссылки." <area shape="rect" "marsO5.163 . .149" alt="Phase 3"> href = "marsO3 .htm" alt="Phase 6"> coords="334. Повышение доступности карт ссылок Все знают.

отличить ссылки. а устройствам чтения экрана поможет определить. например. круглыми скобками.1. квадратные и круглые скобки придают вид блочного. попробуйте использовать символы окантовки: Phase 1 I Phase 2 I Phase 3 I Phase 4 !£KW Favwtes Toe* Click the phases of surface water on Mars for more information " [*j An mage map showing the decline of surface water on the rtanet Mais Phaat 1 | PluseJ: | Phast 3 | PhiS£4 | I t o s f J ) | Phase f Puc. Это поможет вашим посетителям. Эта страница с отсутствующим изображением может никогда и не выиграет приза. не делайте так: Phase 1 Phase 2 Phase 3 Phase 4 Попробуйте так: [Phase 1] [Phase 2] [Phase 3] [Phase 4] Или так: (Phase 1) (Phase 2) (Phase 3) (Phase 4) Конечно. бегло просматривающим страницы. Для чего-то более эстетического. квадратными скобками или символами окантовки (вертикальной чертой). Повышение доступности карт ссылок 191 Совет Всегда разделяйте ссылки в горизонтальном списке каким-нибудь печатным символом. Другими словам.ГЛАВА 36. технического терминала для фанатов математики. 36. но ее карта ссылок полностью доступна для использования . где заканчивается одна ссылка и начинается другая.

htm">Phase 6</ax/p> <map name="mars"> <area shape="rect" alt="Phase 1"> coords = "9 .296" href= <area shape="rect" "marsO6.htrr.htm">Phase 5</a> I <a href= "marsO6 .327.294" href="marsO4.149" href = "marsO3 .hen.295" href= </map> ." alt="Phase 3"> <area shape="rect" coords="9.htm" alt="Phase 2"> <area shape="rect" coords = "334 .htm" alt="Phase 5"> coords="171.2.148" href = "mars01 ."> < p x a href = "mars01 .164 .jpg" width="500" height="300" border="0" usemap="#mars" alt="An image map showing the decline of surface water on the planet Mars. Просмотр исходного кода для рисунка 36.</p> <img src="images/mars.488.htm" alt="Phase 6"> coords="334.htm">Phase l</a> I <a href = "marsO2 . 3 .163.htm">Phase 2</a> I <a href="marsO3.httr" >Phase 4</a> | <a href="marsO5. 487 .149" href="marsO2.328." alt="Phase 4"> <area shape="rect" "marsO5.1.1 <p>Click the phases of surface water on Mars for more information.151.htm">Phase 3</a> I <a href="marsO4.152.Строим Web-сайты 192 Листинг 36. 5 .153.n " <area shape="rect" coords="172.hi.

jpg" p l a n e t Mercury</td> width="200" height="200">Behold. the planet Mercury</td> Но знали ли вы и то. Старые браузеры могут уменьшать размеры ячейки. При использовании изображения в качестве фона ячейки таблицы можно накладывать HTML-содержимое . jpg" width="200" height="200"x/td> Возможно. что может привести к обрезанию фонового изображения. 37. даже если вы укажете точные значения атрибутов width и height. вы также знаете. а не размер изображения. что внутри ячейки таблицы можно разместить изображение следующим образом: < t d x i m g src = "mercury. использование фоновых изображении в ячейках таблицы Вероятно вы знаете. как показано на рисунке 37.1. Рис.1. Совет Атрибуты width и height тега td описывают размер ячейки таблицы. the Использование фоновых изображений в ячейках таблицы позволяет наложить HTML-содержимое. чтобы они соответствовали размерам содержимого ячейки. что можно использовать изображение в качестве фона ячейки таблицы? Это работает следующим образом: <td background="mercury.ГЛАВА 37. что можно задать цвет фона ячейки таблицы следующим образом: <td bgcolor="#FF0000">Behold.

Строим Web-сайты 194 Листинг 37. приведет к расширению ячейки таблицы за значения атрибутов width и height изображения. что объем содержимого. Если вы не можете найти цвет или стиль текста. как показано на рисунке 37. которое вы хотите наложить. которого мы хотели достичь. в результате чего может получиться не тот эффект.это повторение изображения для заполнения заданной области. Просмотр исходного кода для рисунка 37. —> <td valign="bottom" "images/mercury.2. не используйте фоновое изображение. что текст удобочитаем на фоне изображения. Просмотр исходного кода для рисунка 37. поскольку текст заполнит ячейку с размерами 2 00 на 200 пикселов. Совет Убедитесь. чтобы прижать текст к низу ячейки таблицы. Одна из наиболее распространенных проблем в Интернете заключается в плохом контрасте между передним и задним планом. .j pg"> width="200" height="200" background= Behold. чтобы заполнить дополнительную область. Этот метод работает отлично в том случае.Здесь нет необходимости использовать атрибут valign.1. в отличие от примеров данной главы.2. —> <td width="200" height="200" background="images/mercury. когда маловероятно.1 <table> <tr> <!— Установите значение атрибута valign в bottom. который бы достаточно выделялся на фоновом изображении. Листинг 37. the planet Mercury </td> </tr> </table> Определение Мозаичное заполнение .jpg"> .2 <table> <tr> <!. В противном случае браузер использует мозаичное заполнение или повторение изображения.

Hardly anyone bothers to study ' <p>Its only notable quality is the -speed with which i t orbits the sun. чтобы заполнить дополнительную область К сожалению. что позволяют таблицы CSS (обратитесь к главе 38). Mercury.ГЛАВА 37. l i f e l e s s . Использование фоновых изображений в ячейках таблицы 195 <p>Behold.</p> <p>The planet Mercury is a small. the swiftest of deities. браузер использует мозаичное заполнение изображения. was the messenger of the gods.</p> </td> </tr> </table> Рис. 37. Если размеры ячейки превышают размеры фонового изображения. with wings on his heels. . a divine postman and errand runner. In Roman myth. from which i t derives i t s name.2. язык HTML не предоставляет дополнительные атрибуты для точной настройки поведения фоновых изображений. It is one of the hottest •places in the solar system due to i t s proximity to the sun. arid. sun-baked excuse for a heavenly body. the planet Mercury.

the planet Mercury. что путь к изображению заключается в конструкцию u r l (. background-image: url Обратите внимание. как показано на рисунке 38.jpg). Таблицы CSS предоставляют ряд возможностей для дизайна. браузер использует мозаичное заполнение для изображения."> 200px. или же можно отобразить изображение один и только один раз. чтобы использовалось мозаичное заполнение для фонового изображения.. lifeless. < / p > Для добавления фонового рисунка к разделу используйте атрибут backgroundimage следующим образом: <div id="mercury" style="width: (images/mercury. Если хотите. а браузер позаботится обо всем остальном. который ведет себя почти так же. где должно располагаться изображение в разделе."> <p>Behold. с чем вы уже познакомились в главе 37.ГЛАВА 38.дело плохо. Hardly anyone bothers to study <p>Its only notable q u a l i t y i s the speed with which i t o r b i t s the sun. the s w i f t e s t of d e i t i e s . Остальные определения CSS-стилей позволяют настроить поведение фонового изображения. как ячейка таблицы.). a divine postman and errand runner.1. Можно также указать. Если вы не хотите. Если вам не подходит такой эффект . Вы либо определяете их в HTML-коде. sun-baked excuse for a heavenly body. как показано на рисунке 38.. воспользуйтесь атрибутом background-repeat.2. It is one of the hottest places in the solar system due to its proximity to the sun. либо их нет. from which i t d e r i v e s i t s name. In Roman myth. наподобие следующего: <div id="mercury" style="width: 200px.</p> <p>The planet Mercury is a small. в которой используется мозаичное заполнение для фонового рисунка. использование фоновых изображений в CSS-разделах Фоновые изображения в ячейках таблицы либо есть. то вам повезло. Иначе обстоит дело с фоновыми изображениями в CSS-разделах. was the messenger of the gods. можно использовать множество способов мозаичного заполнения для изображения. Mercury. Если объем содержимого ячейки таблицы превышает физические размеры изображения. with wings on h i s h e e l s . Если вам подходит такой эффект. Добавление одного CSS-атрибута background-image приводит к созданию раздела. Начните с типичного раздела. . либо не определяете сов• сем. arid.

38.p o s i t i o n .3.1."> Чтобы расположить фоновое изображение внутри раздела. Использование фоновых изображений в CSS-разделах 197 Листинг 38. background-image: url(images/mercury. Просмотр исходного кода для рисунка 38. установите знав repeat-x.3 <div id="mercury" style="width: 200px. background-image: url(images/mercury. background-repeat: no-repeat.ГЛАВА 38.2 <div id="mercury" style="width: 200рх.jpg). Используйте значение атрибута background-repeat чтобы использовать мозаичное заполнение для чение repeat-у. касающихся фоновых изображений.2. Если указать только CSS-атрибут background.1. Рис.image и ничего больше. как выложить их в Интернете. фонового изображения только в вертикальном направлении."> В таблице 38. что необходимо основательно протестировать страницы перёд тем. когда они встречают определения стилей. поскольку браузеры вытворяют странные вещи. Просмотр исходного кода для рисунка 38.1 приведены распространенные значения для CSS-атрибутов. Совет Если вы хотите использовать мозаичное заполнение для фонового изображения только в горизонтальном направлении. background-position: center. как показано на рисунке 38. background-repeat: no-repeat. Помните. для фонового изображения будет использовано мозаичное заполнение Листинг 38. укажите значение для атрибута b a c k g r o u n d .jpg). .

установите значение атрибута background-repeat в no-repeat Рис.repeat-х. 38. top. 38. .Положение фонового Любая комбинаposition изображения внутри ция следующих раздела значений: left. right. background-position: center left.Строим Web-сайты 198 Рис.2. center. Расположите фоновое изображение при помощи атрибута background-position Табл. Чтобы предотвратить использование мозаичного заполнения для фонового изображения. bottom background-position: left. repeat мозаичное заполнеno-repeat. 38.1. background-repeat: repeat.3. ние для изображения repeat background-repeat: repeat-y. Распространенные CSS-атрибуты для фоновых изображений в разделах Стиль Определяет Возможные значения Пример background. background. пользуется ли вообще repeat-y. background-pos i t ion: right bottom.Как используется и ис. background-position: center.

При использовании таблиц CSS мы получаем больше возможностей дизайна. 39. При добавлении фонового изображения на страницу при помощи языка HTML браузер автоматически использует мозаичное заполнение.gif"> • . В языке HTML мы добавляем атрибут background в тег body. . которые подавляют содержимое страницы. как в следующей строке кода: <body background="images/ufo. не влияющих на четкость и разборчивость вашего текста. Браузер использует мозаичное заполнение или повторение изображения по всему доступному пространству окна браузера. .ГААВА39. При использовании языка HTML мы получаем ограниченные возможности дизайна. но меньшую надежность.1. чтобы заполнить страницу . как показано на рисунке 39. но высокую надежность при использовании на различных браузерах.1. использование фоновых изображений на Web-страницах Существует два способа добавления фонового изображения на Web-страницу. Рис. Первый способ заключается в использовании атрибутов языка HTML. Совет Остерегайтесь фоновых изображений. Второй заключается в использовании определений стилей CSS. Придерживайтесь бесцветных изображений.

как показанное на рисунке 39. которое использует мозаичное заполнение. что бы фоновое изображение не реагировало на прокрутку. однако фоновое изображение будет находиться на прежнем месте. . Содержимое страницы может прокручиваться. Однако таблицы CSS дают дополнительные возможности для точного управления поведением фонового изображения.2.gif). включая стили background-repeat.gif). background-position и background-attachment.3. т. 39. как показано на рисунке 39. точно такое же.2.4. как показано на рисунке 39. repeat-y."> В предыдущем примере создается фоновое изображение. как будет (и будет ли вообще) использоваться мозаичное заполнение для фонового изображения. Установите атрибут background-attachment в значение fixed. фоновое изображение остается привязанным к своему положению в окне браузера.е.1."> Рис.2 <body style="background-image: background-repeat: url(images/ufo. При использовании таблиц CSS для фоновых изображений можно указывать только вертикальное мозаичное заполнение Место расположения фонового изображения на странице определите при помощи а грибута background-position. как фоновое изображение реагирует на прокрутку. Атрибут background-attachment определяет.1. Просмотр исходного кода для рисунка 39.Строим Web-сайты 200 При использовании каскадных таблиц стилей получается такой же результат: <body style="background-image: url(images/ufo. как показано на рисунке 39. Листинг 39. Используйте стиль background-repeat для управления тем.

При использовании таблиц CSS можно даже сделать так. background-position: right. Просмотр исходного кода для рисунка 39. here. 39.4 <body style="background-image: url(images/ufо. Starthng new evidence go Startiing new Startling new :vidence g :s here.s here Startling new evidei is here. Startling new evidenc Startiing new :vidence go> Ш here.3. Starthng new evidence go> Startimg new s here.3 <body style="background-image: url(images/ufo. 39. чтобы фоновое изображение не реагировало на прокрутку Листинг 39. Использование фоновых изображений на Web-страницах Arriving UFOs: Startling New Evidence That Th Рис."> с goes hen Startling new evidence goes h e r Startling new evidence goes heri Stardmg Startling Startimg Starthng new evidence new evidence new evidence new evidence goes goes goes goes here. here here. Перемещайте фоновое изображение по всему экрану.4. Starthng new evidence Starthng new evidence g< II here. hrre here. 201 .gif). Startimg new evidence Startimg new evidence Startling new evidence Startling new evidence goes goes goes goes here here. включив в определение стиля атрибут background-position Листинг 39. Startling new Starting new Startimg new Startling new ividence evidence evidence ividence go goe s go s go s here.gif).ГЛАВА 39. background-repeat: no-repeat. background-repeat: repeat-y.2. here. here. Startling new evu Startling new evidei Startling new evidenci Startling Startling Startling Starting new evideno new evidei new evidenc new evidenc Startling new evidence goi •s here. Startimg new evidenc Startling new •vidence g Л here. Просмотр исходного кода для рисунка 39.3. Startling new evidenc Startling new ividence go' . Startling new evidence Startimg new evidei Starthng new evidei Starthng new evidence Puc. here.

Как используется repeat и используется ли вообще мозаичное заполнение для изображения Возможные значения Пример repeat-x. Чтобы фоновое изображение прокручивалось вместе с остальным содержимым страницы. 39. background-repeat. background. Для удобства программирования в таблице 39. background-attachmen scroll. repeat-y. left.right. top.Положение фоно. repeat. касающиеся фоновых изображений. Табл. background-position: bottom center left.Строим Web-сайты 202 background-position: right.Как фоновое fixed. ний: внутри раздела background-position right bottom.Любая комбинация background-position: position вого изображения следующих значеleft. .1 перечислены возможности таблиц CSS. repeat background-repeat: repeat-y. no-repeat. background-position: center. установите значение атрибута background-attachment в s c r o l l . background. Распространенные возможности таблиц CSS для фоновых изображений Стиль Определяет background.1."> Совет Определение стиля background-attachment отлично работает с изображениями. center. для которых не используется мозаичное заполнение. scroll attachment изображение реагирует на прокрутку background-attachmen fixed. background-attachment: fixed.

ЧАСТЬ 4. Текст Правильное использование текстовых элементов Правильное использование элементов фраз Добавление каскадных таблиц стилей Замена тегов форматирования каскадными таблицами стилей Создание специальных стилей форматирования Изменение вида текстового элемента Определение стилей классов Управление типом шрифта Управление размером шрифта БЛОГ: Подведение итогов по заданию размеров Управление интервалами Управление стилями с выключкой и без выключки Управление отступами Создание списков Выделение текста цветом Восстановление горизонтальных линеек Добавление строки даты и метки времени Разработка таблиц данных Использование псевдоэлементов Определение стилей описания элементов .

а не на функциональном назначении используемого тега. Табл.1. какой хочет получить дизайнер. вероятно. Когда вы размечаете что-нибудь тегом <blockquote>. адрес электронной поч. Распространенные текстовые теги HTML Тег Определяет address Почтовый адрес. возможно у вас выработались некоторые вредные привычки. уже забыли. поэтому нет необходимости заимствовать тег на основании его внешнего вида в браузере — это означает. когда каскадные таблицы стилей (CSS — Cascading Style Sheets) поддерживаются на приемлемом уровне большинством браузеров. прежние аргументы о допустцмости всего. для которого требуется вставить немного дополнительного пустого пространства. 40. Необходимо быстро получить строку полужирного текста? Кто среди нас не поддавался искушению воспользоваться тегом заголовка. даже когда вам не надо форматировать цитату с отступами.<address>3flecb располагается ваш фона. когда вы размечаете что-нибудь тегом заголовка.1. а не изображение. что HTML-теги могут вернуться обратно к своему исходному назначению: определять структуру документа. Если вы достаточно долго разрабатываете Web-сайты. это действительно должно функционировать как заголовок на Web-странице. и вы. для разметки чего предназначались первоначально текстовые теги HTML.aдpec</address> ты или другая форма контактной информации blockquote Цитата с отступами <blockquote>3flecb располагается цитата с OTCTynaMH</blockquote> hi Заголовок первого уровня <Ь1>Здесь вок/hi > располагается заголо- h2 Заголовок второго уровня <Ь2>Здесь вок</Ь2> располагается заголо h3 Заголовок третьего уровня <ЬЗ>Здесь располагается заголо Пример . Правильное использование текстовых элементов Практически каждому Web-дизайнеру приходится время от времени делать это: с помощью HTML-тегов размечать текст. это должен быть текстовый блок с отступами.ГЛАВА 4 0 . Теперь. номер теле. Каскадные таблицы стилей позволяют придать любому HTML-элементу такой вид. уже больше не выдерживают критики. Ознакомьтесь с таблицей 40. что работает. основываясь на внешнем виде текста в браузере. даже если рассматриваемый текст не является заголовком? Требуется создать отступ? Этот фокус можно проделать с помощью те] а < b l o c k q u o t e > . Другими словами.

40. оформляется тегом <h2 >. которые похожи на полужирный текст рубричной рекламы: большей частью по внешнему виду это не заголовок. В идеале. выполняет функцию заголовка. и т. что основной заголовок Web-страницы должен использовать тег <hl >. тем не менее.1. д. Заголовки первого уровня отображаются полужирным и крупным шрифтом и являются основными заголовками на первой странице газеты. . Заголовки второго уровня не такие крупные и похожи на дополнительные заголовки или заголовки разделов в газете. но. Так заголовки изменяются до заголовков шестого уровня. Правильное использование текстовых элементов 205 Тег Определяет Пример h4 Заголовок четвертого уровня <Ь4>Здесь располагается заголовок/h4> h5 Заголовок пятого уровня <Ь5>Здесь располагается заголовок</Ь5> h6 Заголовок шестого уровня <Ь6>Здесь располагается заголовок</Ь6> Р Абзац <р>3десь располагается абзац</р> q Внутристрочная цитата <q>3дecь располагается внутристрочная цитата<7д> Работа с тегами заголовков Как показано на рисунке 40. язык HTML предоставляет шесть уровней заголовков — с h i no h6 — в порядке убывания структурной и визуальной важности.ГЛАВА 40. Подраздел. В языке HTML определяются шесть уровней заголовков В размеченном надлежащим образом HTML-документе должны содержаться теги заголовка для обозначения логической структуры страницы. расположенный под данным заголовком. если удалить повествовательный текст со страницы. tile Edit Sew Favort« Tods цв|р Heading 1 Heading 2 Heading 3 Heading 4 Headings Рис. под-подраздел заключается в тег <h3>.1. Это означает.

Добро пожаловать на мой домашний сайт (заголовок 1) Что находится на моем сайте (заголовок 2) О странице с играми (заголовок 3) О странице с новостями (заголовок 3) О моем интерактивном магазине подарков (заголовок 3) Информация обо мне (заголовок 2) Мое резюме (заголовок 3) Текущее место работы (заголовок 4) Предыдущее место работы (заголовок 4) Образование (заголовок 4) Дипломная работа (заголовок 5) Университет (заголовок 5) Мои увлечения (заголовок 3) Искусство вязания шнурком (заголовок 4) Излюбленные методы (заголовок 5) Ссылки на сайты. . принятым в HTML. подобно следующему примеру: Совет Если содержимое Web-страницы не разбивается в соответствии с некоторой логической иерархией.206 Строим Web-сайты надлежащим образом структурированный набор тегов заголовков дает полную и точную схему информации Web-страницы. имеющие отношение к вязанию шнурком (заголовок 5) Плетение корзин (заголовок 4) Излюбленные методы (заголовок 5) Ссылки на сайты. имеющие отношение к плетению корзин (заголовок 5) Мои контактные данные (заголовок 3) Почтовый адрес (заголовок 4) Телефон/факс (заголовок 4) Адрес электронной почты (заголовок 4) Помните. Важно обеспечить согласованное использование тегов и их соответствие соглашениям. поскольку можно использовать каскадные таблицы стилей для придания тексту любых требуемых атрибутов. что не важно какой эффект оказывают эти теги на вид текста. тогда все заголовки на странице будут одинаковыми.

которые выдает HTML (Рис. тогда как тегом <blockquote> маркируются выделенные цитаты. из которых даже самые незначительные существенно улучшают вид текста по сравнению со сжатыми. которые.3. подобных диалогу в повести. and that's putting it mildly Here is another As you can see. Кто хочет замедлять производственный процесс и включать эти раздражающие символы <р> и < /р> в начале и в конце каждого одиночного блока основного текста? Тем не менее. <q l a n g = " e n . 40. 40. как предполагается. преимущества дополнительных усилий по вставке этих тегов могут быть исключительными.2.ГЛАВА 4 0 . а это означает разметку тегами абзацев всех элементов. что трудно упрекнуть вас в ненадлежащем маркировании текста. Каскадные таблицы стилей обеспечивают широкий диапазон возможностей по оформлению основного текста. wondering even as she s a i d i t if she should have asked for paper. It looks bonng. Тег <quote> предназначен для внутристрочных цитат. Ключевое условие надлежащего применения каскадных таблиц стилей — верная разметка документа. как на рисунке 40. < / q > she r e p l i e d . чтобы использовать каскадные таблицы стилей для улучшения внешнего вида текста использование элементов цитат В HTML существует два вида тегов для разметки цитат: <quote> и <blockquote>. Но старайтесь всегда маркировать абзацы. Абзацы HTML столь непривлекательны. как в следующем примере: <p>Her l i p trembled.u s " > P l a s t i c .</p> . возможно. должны быть абзацами текста. Правильное использование текстовых элементов 207 Маркировка абзацев Тег абзаца является.2). непривлекательными блоками плохо сверстанных строк. самым пренебрегаемым тегом во всем HTML. the browser automatically inserts a carnage return between paragraphs Рис. Консорциум World Wide Web (W3C) рекомендует указывать язык цитаты в атрибуте lang тега <quote>. Не Edit Ще« Favortes took «etp Behold the majestic HTML paragraph.

4. и это не предусмотрено спецификациями HTML.3. OH 9212 3 </address> Обратите внимание на теги <Ьг> в конце каждой строки. S t e . предназначенные для принудительного возврата каретки. тогда как тег <blockquote> используется для цитат с отступами Совет В любом браузере тег <blockquote> не добавляет автоматически кавычки. Получаемый результат выглядит. поэтому нет необходимости указывать язык в открывающем теге <Ыоскquote>. где он встречает теги <quote>. . wondering even as she said it if sr e should have asked for paper Tben the words of her mentor returned: Those who ask for plastic. но браузер Internet Explorer этого не делает. 40.) Браузер Netscape добавляет кавычки там. do not ask for paper "Yes. Рис." she said. как показано на рисунке 40. plastic wiU do fine. Тег <quote> предназначен для внутристрочных цитат. (В разных языках в качестве кавычек используются разные символы и применяются разные правила их расстановки. Отображение адреса Заключите контактную информацию о себе и своей организации в теги <address>." she replied. подобно следующему примеру: <address> The Old Software Company<br> 100 Main St. 500<br> •' - Youngstown.Строим Web-сайты 208 Her hp trembled "Plasfac. что браузеры добавляют кавычки автоматически в зависимости от соглашений для выбранного языка. Зачем? Предполагается.

Правильное использование текстовых элементов 209 Для форматирования любого прежнего адреса на Web-странице не следует использовать теги <address>. Попробуйте зарезервировать эти теги специально для контактной информации. Если необходимо отформатировать несколько адресов. следует избегать тега <address> и определять специальный стиль в каскадных таблицах стилей. 40. Используйте теги <address> для маркировки контактной информации. поскольку механизмы поиска информации и им подобные приложения могут искать теги <address> для извлечения сведений о владельце сайта. относящейся к вашему местонахождению. Fie £* Vie*'/ Favorftes look The Old Software Company 100 Main St.SU. OH92123 Рис.ГЛАВА 40. 500 YoungstoYm. аналогичных контактной информации для вашего сайта.4. или нечто подобное. относящейся к вам или к вашей организации .

и этот аргумент справедлив и для данной главы. Эта аббревиатура произносится не <он». Правильное использование элементов фраз Элементы фразы — это серия HTML-тегов для идентификации определенной структуры сегмента текста внутри более крупных элементов. приводимом в таблице 41. на котором акКурсив центируется внимание strong Действительно выде- Стандартный вид Полужирный ленный текст cite Цитата. Элементы фразы в HTML Тег Определение em Текст. полужирное и курсивное начертание. как абзац. Сначала кое-что напомним. Не забывая о вышесказанном. н». создавайте эти эффекты с помощью каскадных таблиц стилей. а «о. Каждая буква в некоторых аббревиатурах произносится отдельно. расставляя правильные теги. Курсив Что случилось. Хорошим примером аббревиатуры является ООН. даже если аббревиатура в целом удобна для произношения. Элементы фразы обычно создают специальные текстовые эффекты. Если требуется получить дополнительные текстовые эффекты или если нужны специальные эффекты. ссылка или источник Пример <ет>Что</ет> вы сказали? Вы не можете быть <strong>cepbe3HbiM!</strong. такого. Табл. который определяет структуру сегмента текста внутри более крупного элемента. Определение Элемент фразы — это HTML-тег. Назначение большинства элементов фраз ясно из их названия. которая расшифровывается как Организация Объединенных Наций. ознакомьтесь с полным списком элементов фраз.1.ГЛАВА 41. а не по прямому назначению. как абзац. 41. док? < c i t e > Багз Банни< / с i t e > . Аббревиатура — это группа букв. Выполняйте HTML-разметку надлежащим образом. которые не предоставляются тегами по умолчанию. В главе 40 вам встретился совет о более ответственном подходе к кодированию.1. например. которая заменяет слово или несколько слов. но некоторые теги в виде аббревиатур и акронимов нуждаются в дополнительных пояснениях. о. таких. Сейчас каскадные таблицы стилей предоставляют надежную технологию во многих браузерах. Именно таким образом дизайнеры склонны использовать их для своих нужд.

Обычно. но консорциум <abbr title="World Wide Web Consortium">W3C</abbr> не одобрит.текст лем или вводимый им текст Для продолжения нажмите клавишу <kbd>BBOA</kbd> var Переменная в компьютерной программе. как обычно Обычный текст Пошлите свой протест в ocronym t i t l e = " N a t i o n a l Aeronautics and Space Administration">HACA</acronym>. Браузер Internet Explorer не содержит подобной функции. д. . Акроним. Некоторые аббревиатуры не произносятся вообще. abbr Аббревиатура Обычный текст Ваш сайт выглядит фантастически. Когда это происходит. произносят «Калифорния» вместо «си. нажима. вместо этого они заменяются реальными словами. проверьте значение <var>x</var>. как целое слово. acronym Акроним В браузере Netscape аббревиатура отображается с пунктирным подчеркиванием.</ватр> kbd Клавиши.Моноширинный емые пользовате. компьютер выводит сообщение <затр>Ошибка: Перезагрузитесь. эй». эс. Курсив Прежде чем продолжить. предоставляющий полный эквивалент из атрибута заголовка. который определяется в следующем тексте Курсив <dfn>Ter</dfn> является в HTML элементом разметки code Компьютерный код Моноширинный Тег <code>em</code> идентитекст (с одинако. он не произносится по буквам «эн.ГЛАВА 4 1 . когда встречается эта аббревиатура. Правильное использование элементов фраз 211 Тег Определение Стандартный вид Пример dfn Термин. Рассмотрите аббревиатуру для штата Калифорния — СА. функции и т. является аббревиатурой. которая произносится. Когда встречается акроним NASA (National Aeronautics and Space Administration — Национальное агентство по аэронавтике и исследованию космического пространства). эй». которые представляют. д. эй. а читается как одно слово «наса». появляется совет.фицирует выделенный текст вой шириной букв) samp Выходные данные Моноширинный из компьютерной текст программы. наоборот. Когда указатель мыши находится над термином. уравнении и т.

Устройства чтения с экрана и подобные им устройства не понимают. . в Internet Explorer.Строим Web-сайты 212 и крайне редко подставляется реальное название агентства. размеченная как акро ним. поэтому это сообщается им с помощью разметки. Некоторые поисковые механизмы каталогизируют страницы в соответствии со словами в атрибуте t i t l e и по аббревиатуре или акрониму. Как видно из таблицы 41. оно пытается воспроизвести текст как одно слово. которая произносится так. кто ведет поиск по ключевой фразе «HTML». так и теми. использующие устройства чтения с экрана и другие специальные средства. Но посетители. а когда акроним. устройство чтения с экрана воспроизводит его побуквенно или подставляет полный текст. Определение Аббревиатура — это группа букв. особенно акронимы. кто ищет строку «HyperTest Markup Language». когда считывается аббревиатура. наиболее популярном браузере на сегодняшний день). Лазер (laser). как если бы она была отдельным словом. что вам пришлось набирать National Aeronautics and Space Administration для всех встречавшихся акронимов NASA. теги abbr и acronym не добавляют специального шрифтового форматирования к размеченному тексту (по крайней мере. Когда устройству чтения с экрана встречается фраза. которая заменяет слово или серию слов. Когда встречается аббревиатура. Часто задаваемые вопросы Как можно добавить новое слово в мой родной язык? Предложите действительно удачный акроним. Акроним — это аббревиатура. Некоторые акронимы функционируют настолько хорошо как слова. которые большинство людей и не пытается расшифровать. будут благодарны вам за проявленную заботу. который присутствует в атрибуте t i t l e этого тега. что они превратились а реальные слова. Вы просто произносите акроним и продолжаете действовать дальше но своему плану. В чем проявляется различие между маркировкой акронимов и аббревиатур для посетителей сайтов? Абсолютно ни в чем. Большинство посетителей сайта никогда не узнает.1. так что сайт будет найден как теми. радар (radar) и скуба (scuba) были когда-то акронимами. описывающие технические понятия.

которое определяет отдельные части содержимого как конкретные элементы или типы объектов: абзацы. которые не имели вообще ничего общего со структурой. Каскадные таблицы стилей могут использоваться для переопределения способа отображения браузером HTML-тега или серии тегов. и их труднее использовать. С этой точки зрения каскадные таблицы стилей чрезвычайно удобны для разделения структуры документа — чисто технического описания Web-страницы. определяющее отношения между частями содержимого и типами так называемых элементов.е. ориентированных на полное кодирование тегами. озабоченные графикой.Cascading Style Sheets) описывают стиль или внешний вид элементов на Web-странице. Теоретически. Вводите ^каскадные таблицы стилей. получают способ использовать HTML как чисто структурный язык. «Графические» головы медленно осваивают ее. они по-прежнему остаются не до конца развитой технологией. цитаты и так далее — от представления документа — внешнего вида всех элементов в браузере. занятых Web-разработками. Для Web-разработчиков. заголовки. Это приводит к недовольству Web-разработчиков. изображения. а головы.ГЛАВА42. предполагалось. занятые исключительно кодированием. теоретически удовлетворяют требованиям обоих типов специалистов. они интуитивно менее понятны. получают расширенный и улучшенный набор вариантов разработки для управления видом Web-страниц на уровне пикселов. Когда HTML появился впервые. к описанию структуры страницы — а браузер отвечал за представление данных. которые. к каким типам объектов относились те или иные части содержимого — т. Структура страницы — это ее техническое описание. Обратная сторона такого подхода заключается в том. Представление страницы определяет внешний вид страницы в браузере. Головы. что хотя каскадные таблицы стилей существуют уже несколько лет. поскольку каскадные таблицы стилей в большой степени используют кодирование. пока сам код HTML не становился непонятной смесью из структурных элементов и элементов представления. Роль Web-разработчика сводилась к определению того. что это будет структурный язык. Добавление каскадных таблиц стилей Каскадные таблицы стилей (CSS . чем HTML-разметку. которые ничего не делают со структурой. Определение Каскадные таблицы стилей описывают стиль или внешний вид элементов на Web-странице. погруженных в кодирование. по крайней мере. хотя HTML содержит ряд тегов представления. как и для рафинированных специалистов в консорциуме W3C. Каскадные таблицы стилей предполагают определенный уровень технического понимания. а каскадные таблицы стилей определяют представление. этот способ работы был одинаково неприемлемым. либо с их помощью можно создать полностью новые стили и применить их к любым частям содержимого страниц. HTML обрабатывает структуру страницы. причем внешний вид элементов должен был определяться программным обеспечением браузера. . Они требовали все больше и больше управления видом Web-страниц. Для разбирающихся в графике Web-разработчиков этот способ работы был неприемлем.

как корпорация Microsoft и компания Netscape. Написание таблицы стилей Таблица стилей — это блок CSS-кода. тестировать и еще раз тестировать свои Web-страницы в различных браузерах. Время этих веяний медленно уходит в прошлое. как надо отображать селектор. Таблица стилей содержит одно или несколько правил стилей. предназначенных для браузера.Строим Web-сайты 214 которого многие люди. который импортируется в HTML-документ. Это необходимо. кто пытается использовать их. Она состоит из правил стилей. Используйте теги стилей только в тех случаях. поэтому их эффективное применение стало. как подвергаемые критике HTML-теги представления. Более того. Написание каскадных таблиц стилей Существует два способа добавления каскадных таблиц стилей на Web-страницу: написание таблицы стилей или помещение CSS-кода в атрибут стиля тега. Определение Таблица стилей — это блок CSS-кода. Теперь каскадные таблицы стилей получили достаточно широкий уровень поддержки в основных браузерах. который помещается между тегами стилей в HTML-документе или в отдельном CSS-файле. реальным. и определение стиля. которое сообщает браузеру. когда таблица стилей встраивается в HTML-документ. не имеют я не желали приобретать в бурные дни возникновения интернет-компаний. Однако нигде каскадные таблицы стилей не демонстрируют такой стабильности. и определения стиля. Правило стиля имеет селектор стиля. чтобы устранить неизбежные проблемы. не требуется расставлять теги стилей до и после CSS-кода. или инструкций презентации. такие. ориентированные на визуальное восприятие. который тр<о/ется отформатировать. должен тестировать. предоставляющего пары атрибут/значение. не утруждались обеспечением согласованной и полной поддержки каскадных таблиц стилей. Она располагается в HTML-документе между тегами стилей или существует в качестве отдельного файла. как надо отображать селектор. по крайней мере. Поэтому тот. ошибки и несоответствия. предназначенных для браузера. или инструкций представления. Совет Когда таблица стилей содержится в своем собственном файле. закравшиеся в проект. который представляет собой форматируемые элементы. . создатели браузеров. которые сообщают браузеру.

16 пикселов. Добавление каскадных таблиц стилей 215 Таблица стилей выглядит во многом как приводимый ниже пример кода: <style type="text/ess"> hi { font-family: Arial.1. вы можете догадаться. В HTML пары атрибут/значение принимают следующий вид: имяатрибута="значение" где имя атрибута представляется одним словом. font-size: 24px. Код между фигурными скобками ({}). Результат применения этих стилей похож на изображение в браузере на рисунке 42. когда имя шрифта содержит более одного слова. хотя из этого правила существует несколько исключений. соответственно. атрибут отделяется от значения с помощью знака равно ( = ) и значение заключается в кавычки. что селекторы . где части имени атрибута разделяются символом тире (-) вместо их совмещения в одном слове. P { font-family: font-size: "Times New Roman". к которым применяется стиль. и в конце каждой строки ставится знак точки с запятой (. В каскадных таблицах стилей соглашение по кодированию отличается от принятого в HTML: имя-атрибута: значение. как Times New Roman в предыдущем примере. другое для селектора р.ГЛАВА 42. следующими после каждого селектора. Пусть этот стиль кодирования не путает вас. Определение стиля содержит пары атрибут/значение. является определением для этого селектора. Просто. font-weight: bold.). Помните. </style> Эта таблица стилей содержит два правила стилей: одно для селектора hi. 16px. а не знак равенства. знакомясь с определением. что заголовки первого уровня отображаются полужирным шрифтом Arial с размером 24 пиксела. . В данном случае стиль применяется к тегам hi и р для заголовков первого уровня и абзацев.это элементы. например. тогда как для отображения текста абзацев используется шрифт Times New Roman. Обычно значение не требуется заключать в кавычки. для отделения атрибута от значения используется двоеточие (:).

font-family: Verdana. могут задаваться в каскадных таблицах стилей. Другими словами. Данный HTML-документ содержит таблицу стилей. что текст абзаца должен отображаться красным шрифтом. если специально не указано. которые. В предыдущих примерах определения не содержат указаний об интервалах или цвете текста. Поэтому. в которой определяются стили для тегов hi up Если таблицу стилей изменить следующим образом: <style type="text/css"> hi { font-family: "Times New Roman". font-weight: bold.2.1. браузером . как на рисунке 42. нет необходимости указывать значения для всех возможных атрибутов в определении. 42.Строим Web-сайты 216 This is a first-level head TTus is a paragraph. При пропусках информации в определении браузер заполняет их своими параметрами. font-size: 8px. конечно же. </style> представление Web-страницы изменится и будет выглядеть. Определения стилей могут быть сложными или простыми в зависимости от решаемых задач. font-size: 96px. This is another paragraph Рис. используемыми по умолчанию.

ГЛАВА 42. Добавление каскадных таблиц стилей

217

будет выводиться черный шрифт, используемый по умолчанию. Подобным образом,
если в предыдущих примерах браузеру не сообщить специально о том, что надо использовать шрифты Verdana или Arial, браузером будет подставляться шрифт по умолчанию.

This is a firstlevel head
Рис. 42.2. При изменении определения стиля
внешний вид Web-страницы изменяется
Таблицы стилей называются каскадными благодаря тому, что дочерние элементы наследуют стили своих родителей, также, как человеческие дети наследуют гены своих
родителей.
Родительский элемент — это HTML-тег, содержащий другой HTML-тег. Дочерний
элемент'— это HTML-тег, который содержится в родительском элементе. Возьмем
данный блок HTML-кода:
Welcome b a c k ,

my f r i e n d s

t o t h e <em>Show That Never Ends</em>!

</p>
Тег абзаца (<р>) является родительским, а тег выделения (<em>) — дочерним, поскольку тег выделения находится между открывающим и закрывающим тегами абзаца. А в
этом случае:
<body>
Welcome b a c k , my f r i e n d s

t o t h e <em>Show That Never Ends</em>!

</body>
тег выделения по-прежнему является дочерним тегом абзаца, но теперь и тег абзаца и
тег выделения являются дочерними элементами тега основного текста (<body>).
Каскадирование действует следующим образом: дочерний элемент наследует стиль
родительского элемента. Таким образом, любой стиль, присвоенный тегу <body>:

Строим Web-сайты

218
<style type="text/css">
body {
font-family: Arial;
}

</style>
автоматически применяется ко всем его дочерним элементам, которыми, как покязано на рисунке 423, в данном примере являются тег абзаца и тег выделения. Даже если по умолчанию в браузере используется шрифт Times New Roman, не надо сообщи ь
браузеру о необходимости использовать шрифт Arial из родительского тега <body>.

Совет
Некоторые атрибуты каскадных таблиц стилей не переходят от родительских элементов к дочерним, но это нормально, поскольку не
требуется, чтобы дочерние элементы наследовали эти свойства.
Возьмем атрибут верхнего поля, который определяет размер верхнего поля страницы. Этот атрибут обычно указывается в теге
<body>. Вряд ли вы захотите, чтобы все абзацы, заголовки, изобри жения и другие дочерние элементы тега <body> имели одинаковое
верхнее поле или чтобы содержимое страницы скучивалось вверуу
окна браузера.

Welcome back, my friends, и the Show That Never Ends)

Puc. 42.3. В каскадных таблицах стилей дочерний элемент наследует
стиль своих родительских элементов. Браузеру не надо указывать
об отображении текста абзацев шрифтом Arial,
если в определении стиля для тега <body> уже задан шрифт Arial

ГЛАВА 42. Добавление каскадных таблиц стилей

219

Каскадная природа CSS (CSS — Cascading Style Sheets) означает, что определения стилей дочерних элементов дополняют или уточняют стили родительских элементов.
В этой таблице стилей:
<style type="text/css">

body {
font-family: Arial;

P {

font-style: italic;

</style>
текст абзацев отображается курсивным шрифтом Arial, тогда как другие основные элементы — например, теги h i — отображаются обычным шрифтом Arial. Заголовки первого уровня являются дочерними элементами тега <body>, как абзацы, а все дочерние
элементы тега <body> отображаются шрифтом Arial. Однако в этой таблице стилей
только дочерние элементы абзаца имеют дополнительное уточнение об отображении
курсивом, поэтом)' браузером это дополнительное определение стиля применяется к
тегам <р>, а остальные дочерние теги остаются без изменения. На рисунке 42.4 показан результат применения данной таблицы стилей.

Совет
Когда определение стиля дочернего элемента противоречит определению стиля родительского элемента, браузером используется стиль дочернего элемента. Например, если в родительском
определении указан шрифт Verdana, а в дочернем определении —
Arial, браузер будет выводить дочерний элемент шрифтом Arial.
По крайней мере, предполагается, что браузер будет так делать.
Браузеры не всегда правильно обрабатывают наследование, поэтому старайтесь проверять все эффекты таблиц стилей в различных браузерах.

Строим Web-сайты

220

This is a first-level header. It inherits
Arial from the body style, but it does not
display in italic.
This is a paragraph It inherits Anal from the body style, and it displays in italic because
of the additional paragraph style

Puc. 42.4. Используйте дополнительные определения стилей
для уточнения и рааиирения стилей, которые наследуются
дочерними элементами от своих родителей

Внедрение таблиц стилей
Чтобы внедрить таблицу стилей на HTML-страницу, расположите CSS-код между т и ами стиля и поместите весь блок стиля внутрь раздела заголовка страницы, подо "но
следующему примеру:
<html>

• .

.

.• •

<head>
<title>MoH HTML-CTpaHMD;a</title>
<style

type="text/css">

body -{
font-family: Arial;

P (
font-style:

italic;

</style>
</head>
<body>

<!—Содержимое страницы располагается здесь. —>

-

ГЛАВА 42. Добавление каскадных таблиц стилей

221

</body>
</html>
Встроенная таблица стилей действует в отношении всех элементов на той странице,
где она внедрена, и не действует на элементы других страниц, если только не вставить
таблицу стилей на другие страницы сайта.

Совет
Чтобы спрятать CSS-код от старых браузеров, не поддерживающих
каскадные таблицы стилей, можно поместить блок CSS-кода в теги
комментария (<!—, —>). Поместите открывающий тег комментария
сразу после открывающего тега s tyl е, а закрывающий тег комментария поместите непосредственно перед закрывающим тегом
s tyl e.

Цмпорт таблиц стилей
Чтобы не включать одинаковые таблицы стилей на каждой странице сайта, можно поместить таблицу стилей в отдельный файл, сохранить этот файл с расширением .ess,
а затем импортировать данную таблицу стилей на все страницы, где она нужна. Применяя такой способ, требуется только один раз написать таблицу стилей, и вам не надо будет копировать и вставлять один и тот же код. Если потребуется изменить стиль,
вам нужно будет лишь изменить его в одном месте — в CSS-файле. Если же вы внедряете таблицу стилей, необходимо будет обновлять CSS-код на всех страницах сайта, где
эта таблица вставлена.
Чтобы импортировать внешний CSS-файл, пользуйтесь правилом ©import вместо
внедренной таблицы стилей:
<html>
<head>
<title>MoH HTML-CTparoma</title>
<style

type="text/css">

©import u r l ( " s t y l e s / m y s t y l e s . e s s " ) ;
</style>
</head>
<body>
<!— Здесь располагается содержимое страницы. —>

Строим Web-сан ты

222

</body>
</html>
После правила ©import укажите адрес в Интернете таблицы стилей, используя для:»г >
го конструкцию u r l ("путь"). Путь может указываться относительно документа, корневой папки или же может приводиться абсолютный путь, подобно пути для ссылки.
Можно импортировать несколько таблиц стилей:
<style t y p e = " t e x t / c s s " > •
©import

url("styles/stylesOl.ess");

©import

url("styles/stylesO2.ess");

©import

url("styles/stylesO3.ess");

</style>
Если импортированные таблицы стилей требуется дополнить дополнительными, характерными только для конкретной страницы, стилями, используйте следующий код:
<style

type="text/css">

©import

url("styles/stylesOl.ess");

©import

url("styles/stylesO2.ess");

©import

url("styles/stylesO3.ess");

color:

#ffOOOO;

</style>
Если одна из импортированных таблиц стилей содержит стиль абзаца и необходимо,
чтобы браузер использовал вместо него стиль, специфический для данной страницы,
задайте стиль для страницы следующим образом:
<style type="text/css">

©import url("styles/stylesOl.ess"J
©import url("styles/styles02.ess"!
©import url("styles/stylesO3.ess"!

ГЛАВА 42. Добавление каскадных таблиц стилей

223

Р (
color: #ffOOOO;
!important;

</style>

Совет
Браузеры старых версий не понимают правило стиля @import, но
этот недостаток можно обратить в достоинство. Внедрите базовые
определения стилей в HTML-код страницы, а затем используйте
@import для внесения расширенных стилей, которые не работают в
старых браузерах. Только не маркируйте основные, внедренные стили объявлением ! important,
иначе общие стили заменят усовершенствованные версии, добавленные командой @import.
Объявление ! important сообщает браузеру, что в случае возникновения конфликта
надо использовать данный стиль. Браузер игнорирует любые стили абзацев в импортированных таблицах стилей только на этой странице.

использование HTML-атрибута стиля
Написание таблицы стилей оправданно, когда имеется глобальный стиль, который
применяется ко всем элементам определенного типа. А когда существует одноразовый
стиль, который применяется к конкретному экземпляру элемента на странице и нигде
больше, имеет смысл поместить определение в атрибут стиля для тега элемента.
Скажем, вы хотите, чтобы определенный абзац отображался полужирным, красным
шрифтом, тогда как остальные абзацы должны отображаться шрифтом, который используется браузером по умолчанию. Вы не хотите создавать таблицу стилей для тега
абзаца, поскольку это приведет к изменению шрифта всех абзацев на полужирный,
красный шрифт. Эта задача решается с помощью следующего кода:
<p>This i s a normal paragraph,

n e i t h e r bold nor red.</p>

<p>This is another normal paragraph, neither bold nor red.</p>
<p style="font-weght: bold; color: #FF0000;"">This is a special
paragraph, both bold and red.</p>
<p>Back to normal paragraph style here, neither bold nor red.</p>

224

Строим Web-сайты

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

Совет

Обратите внимание, что определение внутри атрибута стиля соответствует правилам написания каскадных таблиц стилей, даже если в
окружающем коде соблюдаются синтаксические правила HTML

FUe
Ibis is a normal paragraph, neither bold nor red
This is another normal paragraph, neither bold nor red
This « з special paragraph, both bold imti led.
Back to normal paragraph style here, neither bold nor red

Puc. 42.5: Пдмещайте CSS-определение внутрь атрибута
стиля HTML-тега, чтобы создать стиль
одноразового употребления для этого тега

ГЛАВА 43.
Замена тегов форматирования
каскадными таблицами стилей
Теги форматирования — это HTML-теги, которые в явном виде задают шрифтовые
эффекты, такие, как полужирное начертание, подчеркивание и курсив. В отличие от
элементов фразы, теги форматирования не определяют структуру размечаемого текста. Они просто показывают, что определенная строка текста должна отображаться полужирным шрифтом, курсивом или с подчеркиванием.
К тегам форматирования относятся: b (для полужирного шрифта), i (для курсива), и
(для подчеркивания) и s, или s t r i k e , (для перечеркивания). На рисунке 43.1 показано действие этих тегов.

"Yes," he said boldly "By all means, use italics Ibev.look classier than underlines
Otherwise, ГЦ just otiike tluuugli your copy and make you do it again"

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

Определение
Тег форматирования — это HTML-тег, который описывает внешний
вид блока содержимого, но не идентифицирует ни структуру, ни назначение содержимого.

8-191

Поместите имя стиля.s { text-decoration: line-through. 43. Если вы выделили подчеркнутый текст другим цветом. в атрибут класса. Скопируйте эти определения в таблицу стилей своего сайта или поместите их между тегами стиля в разделе заголовка HTML-файла. независимо от способа его реализации. не являющегося ссылками. вам придется просить посетителей направлять свои электронные сообщения. что HTML должен быть языком разметки только структуры.bold. •i { font-style: italic. •Ь { font-weight:. чтобы отформатировать часть текста с помощью этих определений. и т. возможно. действие которого показано на рисунке.к. не являющийся ссылкой. Лучше полностью исключить подчеркивания текста. Web-мастеру. полагая. Если на странице подчеркивается текст. Вместо этого следует применять определения стилей в каскадных таблицах стилей так. подчеркивания и перечеркивания. курсива. полные возмущений.2. Подчеркивание практически всегда указывает на гиперссылки.Строим Web-сайты 226 Совет Избегайте использования подчеркивания. и использовать для выделения текста курсив вместо подчеркивания.. как это описано в инструментарии данной главы. Затем. который хотите использовать. Поскольку теги форматирования ничего не должны делать со структурой. Инструментарий Определения стилей с помощью каскадных таблиц стилей для замены тегов форматирования В данном инструментарии приводится четыре определения стилей CSS с целью замены HTML-тегов форматирования для полужирного шрифта. что это ссылка. •u{ text-decoration: underline. посетители сайта будут пытаться щелкнуть на этом тексте. . форматирование с помощью этих тегов теперь считается ошибкой разметки. . используйте тег <span>. считается.

1. ничто не мешает поступить в соответствии со своими предпочтениями. Если предпочтение отдается более содержательным именам. и позволяют вновь использовать HTML как чисто структурный язык Листинг 43. s — образованы от имен соответствующих тегов форматирования с тем.2. как теги форматирования.</p> gives you <span class="s">strikethrough</span> Совет Сокращенные имена классов стилей — b. Исходный код страницы. Puc. Такие определения действуют также хорошо.ГЛАВА 43. .2 <p>This style gives you <span class="b">bold</span> text. i. вид которой в браузере показан на рисунке 43. Замена тегов форматирования каскадными таблицами стилей 227 Ne £dit wew Favorites Tools Help This style gives you bold text. Проверьте.</p> <p>This style gives you <span class="i">italic</span> text. Вместо тегов форматирования используйте определения стилей каскадных таблиц стилей. u.</p> <p>This style gives you <span class="u">underlined</span> text.</p> <p>This style text. This style gives you italic text. This style gives you underlined text. чтобы в атрибутах классов для тегов <span> приводились измененные имена классов. скажем bold или italic. 43. This style gives you iuiX-Llluuugli text. чтобы облегчить Web-дизайнерам старой школы переход на использование каскадных таблиц стилей.

bolder. как сымитировать эффекты HTML-тегов форматирования с помощью простой таблицы стилей. text-decoration underline. Они предоставляют лишь основные виды форматирования: полужирное начертание. но не идентифицирует ни структуру. overline. none text-decoration: overline. capitalize. Стандартные CSS-атрибуты форматирования CSS-атрибуты Возможные значения Пример font-weight bold. разница будет заметна на распечатке. line-through. какими являются HTML-теги форматирования в определенных кругах Web-дизайнеров. .1. как курсивный шрифт (italic). эти теги достаточно ограничены. none Совет Текст с большей или меньшей плотностью шрифта вряд ли будет отличаться от обычного текста на экране. Создание специальных стилей форматирования В качестве предпочтительных элементов. но. хотя в будущих версиях браузеров наклонный текст. font-variant normal. ни назначение содержимого. normal font-style: oblique. lighter.1. возможно. Кроме того. подчеркивание и перечеркивание. который описывает внешний вид блока содержимого. курсив. перечисляемым в таблице 44. и (подчеркивание) и s или strike (перечеркивание). oblique. text-transform text-transform: capitalize. Каскадные таблицы стилей открывают дорогу ко многим другим возможностям форматирования.- font-style italic. normal font-weight: bolder. small-caps' font-variant: small-caps. 44.ГЛАВА44. uppercase. i (курсив). Совет Тег форматирования — это HTML-тег. Табл. lowercase. возможно. В главе 43 описывается. в существующих браузерах наклонный шрифт (oblique) выглядит также. будет выглядеть по-другому. К тегам форматирования в HTML относятся b (полужирный).

</style> <q>I thought we went <span class="o">over</span> this.ГЛАВА 44. который преобразует строчные буквы исходного кода в уменьшенные прописные буквы в окне браузера (рис.2). рис. Листинг 44.</q> Captain Steward.1.1. вид которой в браузере показан на рисунке 44. Исходный код страницы. . Использование каскадных таблиц стилей (CSS) для создания черты сверху вместо подчеркивания Строку текста можно также визуализировать в стиле small-caps (капитель). said Рис. 44.1 <style type="text/css"> •о { text-decoration: overline. 44. Создание специальных стилей форматирования 229 Хотите черту сверху вместо подчеркивания? Нет проблем . 44.1.см.

текст со значением атрибута uppercase отображается в браузере со всеми заглавными буквами. независимо от регистра букв в исходном коде. Строчные буквы исходного кода преобразуются в окне браузера в заглавные Листинг 44.2. Как показано на рис. } • </style> <span class="sc">The Buck Stops Here.Строим Web-сайты 230 Fie £* View Favortes loots THE B U C K STOPS HERE That's what the placard on his desk said Рис. В тексте со значением атрибута c a p i t a l i z e первая буква каждого слова выводится на экран как заглавная.2. 44. Подобным образом. вид которой в браузере показан на рисунке 44.</span>That's what t h e placard on h i s desk s a i d . 44. чтобы изменить регистр букв исходного кода.2 <style type="text/css"> . . sc { font-variant: small-caps. а текст со значением атрибута lowercase — со всеми строчными буквами.3. используйте значения c a p i t a l i z e . uppercase и lowercase с атрибутом t e x t .t r a n s f o r m . Исходный код страницы.

ГЛАВА 44. Исходный код страницы. вид которой в браузере показан на рисунке 44.">an ordinary line of text. so . Создание специальных стилей форматирования Fie £dtt View Favorites loots 231 (jrip An Ordinary Line Of Text. so <p style="text-transform: transformed by CSS</P> lowercase.3.">an ordinary iine of text.3 <р style="text-transform: transformed by CSS</P> capitalize. SO TRANSFORMED BY CSS an ordinary line of text.">an ordinary line of text.3. so <p style="text-transform: transformed by CSS</P> uppercase. 44. so transformed by ess Рис. So Transformed By CSS AN ORDINARY LINE OF TEXT. Изменяйте регистр букв предложения с помощью значений атрибута text-trans form Листинг 44.

Таким образом. находящиеся где-нибудь внутри тега другого типа. независимо от его места на странице:. hi { font-family: Arial. либо всех тегов <strong>. изменение Внешнего Вида текстового элемента В каскадных таблицах стилей простейшим селектором стиля является имя HTML тега. например. Определение стиля для этого простого селектора устанавливает. . Этот тип селектора используется для установки стиля всех тегов выделения. Как показано в таблице 45.ГААВА45. которые встречаются. если только для этих случаев не предоставлены дополнительные правила стилей. В этих примерах браузер игнорирует теги выделения. font-family: Verdana. или теги <strong>. Дочерний и братский селекторы не всегда работают хорошо в браузере Internet Explorer. Определение контекстно-зависимых селекторов Контекстно-зависимый селектор — это селектор стиля. каскадные таблицы стилей позволяют выбирать гораздо более специфические селекторы для всей серии тегов. font-weight: bold. чтобы получить требуемый шрифтовой эффект. внутри таблицы. выполняется переопределение общего внешнего вида HTML-тегов текста. встречающихся внутри упорядоченного списка. которые не находятся в упорядоченном списке. которые не появляются в таблице. который идентифицирует все HTML-теги определенного типа.1. как браузер будет отображать элемент.

но не являются дочерними элементами этого другого тега +р Все абзацы. полужирным шрифтом. все теги <strong>. идентифицирующий все HTML-теги определенного типа. которые находятся гденибудь внутри тега другого типа. которые находятся зависимый где-нибудь внутри тега другого типа Все теги выделения. Изменение внешнего вида текстового элемента 233 Табл. почему полужирным. которые имеют в качестве родителя какой-нибудь тег другого типа Все абзацы. Синтаксис для этого типа селектора выглядит следующим образом: тег-контейнер целевой-тег Как можно видеть. - Только те теги <strong>. которые следуют сразу за заголовками первого уровня Определение Контекстно-зависимый селектор — это селектор стиля. . которые находятся где-нибудь внутри таблицы Дочерний Все HTML-теги одного ти.1. 45. у вас возникнет вопрос.ГЛАВА 45. имена тегов разделяются с помощью одиночного пробела. CSS-селекторы для HTML-тегов Селектор Описание Пример синтаксиса Описание примера Простой Все HTML-теги одного типа Р Все абзацы Контекстно. Таким образом. отображается полужирным шрифтом без дополнительного эффекта курсива. .table em па. которые следуют за тегом другого типа. размеченный тегами <strong>. находящиеся внутри упорядоченного списка. для которых ячейки таблицы являются их прямыми родителями Братский Все HTML-теги одного ти. правило стиля должно выглядеть подобно следующему примеру: ol strong { font-style: italic. которые находятся внутри упорядоченного списка. размеченный тегами <strong>. Как видно из рисунка*45.td > р па. отображаются браузером полужирным курсивом.1. остальной текст на странице. Возможно.Все HTML-теги одного ти. располагающихся где-нибудь внутри упорядоченного списка. например. если в стиле ничего не указывает на полужирное начертание шрифта? Потому что по умолчанию браузеры воспроизводят текст. чтобы определить стиль для всех тегов <strong>.hi па.

45. внутри элементов di v . внутри ячеек таблиц.2. находящимся внутри тегов абзацев. Скажем. } Как показано на рисунке 45. but no paragraph in this celt Emphasis. Соберите вместе ряд из нескольких тегов для создания специфичного контекстно-зависимого селектора. but no paragraph in this cell Emphasis. but no paragraph in this celt Puc. При использовании контекс тно-зависимого тега дополнительный стиль применяется только к тем тегам <strong>. расположенных внутри элементов div: div td p em { font-weight: bold. вы хотите применить стиль только к тем тегам выделения. Этот стиль воздействует только на теги <ет>. браузер следует инструкциям буквально. A table follows: Emphasis. 45.1. b a t s o paragraph m this cell 4mphusts. Here is the regular content of the page.Строим Web-сайты 234 ЕЙ Е* J/iew Favorites Tools tJdp i Tins strong t a g doesn't appear in an ordered list • This strong tag appears in an unordered list • So does this on* 1.2. and a paragraph This content appears insi»le a div element. которые находятся внутри упоря точенного списка С помощью контекстно-зависимых селекторов можно действовать действительно избирательно. которые в свою очередь находятся внутри ячеек таблицы. This strong tag appears in an ordered list 2 So does this one * Рис. расположенные внутри тегов абзацев. It doesn't appear inside a div A table follows: Emphasis.

not a table cell. правило стиля не применяется. Its parent is a table cell. Следующее правило стиля действует только в отношении абзацев.дочерние объекты ячеек таблицы. например. которые являются непосредственными дочерними объектами ячеек таблицы.ГЛАВА 45. 45. . Если рассматриваемый тег не является прямым дочерним объектом родительского тега. идентифицирующий все HTML-теги определенного типа. Here is a paragraph. которые являются непосредственными дочерними объектами ячеек таблицы. С помощью дочернего селектора выделяются только те теги определенного типа. but it isn't a paragraph. Here ii a paragraph. как. идентифицирующий все HTML-теги определенного типа. все остальные абзацы отображаются браузером невыделенными. которые имеют в качестве прямых родителей теги другого типа. Изменение внешнего вида текстового элемента 235 Определение дочерних селекторов Дочерний селектор — это селектор стиля. выделяются полужирным шрифтом Определение Дочерний селектор — это селектор стиля. например. В этом случае только абзацы . как.3. Рис. все абзацы.3. Как показано на рисунке 45. but its parent is the body tag. которые имеют в качестве своего непосредственного родителя тег другогб типа. Синтаксис данного типа селектора выглядит следующим образом: родительский-тег > дочерний-тег Разделяйте имена тегов с помощью знака «больше чем» (>). которые имеют в качестве своего непосредственного родителя тег другого типа. A table follows: Here is s ome text. Its parent is a table cell. находящихся внутри ячеек таблицы: td > р { 'font-weight: bold. все абзацы.

Чтобы воздействовать на все теги выделения внутри ячеек таблиц.</p> ' </td> но работает корректно в данном случае: <td> This i s unformatted t e x t with <em>emphasis</em>. Несомненно.Строим Web-сайты 236 Совет т Браузер Microsoft Internet Explorer некорректно обрабатывает пример. независимо от точной генеалогии. Это правило стиля действует в обоих предыдущих случаях. воспользуйтесь вместо дочернего селектора контекстно-зависимым селектором: td em { font-weight: bold. правило стиля. Это правило стиля выбирает только те теги выделения.3. Здесь важна точная генеалогия тега. поэтому очень тщательно проверяйте дочерние селекторы в Internet Explorer. но в такой ситуации дочерний селектор не работает. ячейка таблицы является «дедом» тега выделения. Тег выделения должен быть прямым дочерним объектом родительского тега. Можно задавать полную генеалогию тега в качестве селектора для получения действительно особенных результатов. Таким образом. рассматриваемый тег должен быть прямым дочерним объектом своего родителя. показанный на рисунке 45. являющихся в свою очередь дочерними объектами ячеек таблицы: td > hi > em { font-weight: bold. которые являются дочерними объектами тегов <hl>. </td> Почему? В первом случае прямым дочерним объектом ячейки таблицы является тег абзаца. Чтобы дочерний селектор работал. подобное следующему примеру: t d > em { font-weight: bold. не оказывает воздействия на следующий блок HTML-кода: <td> <p>This i s a paragraph with <em>emphasis</em>. как во втором случае. поскольку в обоих этих случаях тег выделения находится где-то внутри ячейки таблицы. . Вернемся к дочерним селекторам. а не тег выделения.

ГЛАВА 45. но не являются дочерними элементами этого тега. Рассмотрим тег абзаца. абзацы. отображаются полужирным шрифтом. например.</p> </td> Таким образом. Эти теги являются братскими. которое выглядит подобно следующему примеру: hi + р { font-weight: bold. для выбора всех абзацев. а не за заголовком первого уровня. используйте следующий синтаксис: ^ старший-брат + младший-брат для правила стиля. Определение Братский селектор — это селектор стиля. и только тогда. идентифицирующий HTML-теги определенного типа. следующий за заголовком первого уровня внутри ячейки таблицы. Почему? Потому что фактически этот абзац следует за абзацем. что второй абзац под заголовком первого уровня не выделяется полужирным шрифтом. следующие за заголовками первого уровня. которая содержит оба эти тега: <td> —> <!— This t a b l e cell <hl>I am t h e o l d e r good. Обратите внимание. sibling. следующих за заголовками первого уровня. Братский селектор выбирает только тег. которые следуют за тегом другого типа. но при этом идентифицируемые теги не являются дочерними объектами этого тега. как. Как показано на рисунке 45. приводимое ниже правило стиля: td + em { font-weight: bold. . поскольку тег абзаца не находится внутри тега заголовка. for my own I always g e t my own way. I am way too t h e s e two serious children. Абзац не является дочерним объектом заголовка. абзацы. Изменение внешнего вида текстового элемента 237 Определение братских селекторов Братский селектор — это селектор стиля. следующий непосредственно за ним. идентифицирующий все HTML-теги определенного типа.4. следующие за заголовками первого уровня.</hl> <p>I am t h e younger is t h e proud p a r e n t of sibling. подобно брату и сестре. за которыми следует тег другого типа. тогда как к другим абзацам это выделение не применяется. когда второй тег не является дочерним объектом первого тега. Таким образом. Их общий родитель — ячейка таблицы.

Это правило стиля действует только в отношении абзацев. h i . братские селекторы позволяют достигать высочайшего уровня точности в управлении тегами. всем заголовкам первого уровня. которые следуют за заголовками третьего уровня и т. являющимся братьями заголовков второго уровня. Используйте братский селектор для воздействия на теги. 45. td > strong { color-: #FF0000. Смешивание селекторов разных типов Каскадные таблицы стилей обладают достаточной гибкостью. Here is A paragraph that follows a second-level bead Рис. Согласно правилу все эти элементы окрашиваются в красный цвет. следующих за заголовками четвертого уровня. позволяющей применять одно и то же определение стиля к нескольким селекторам разных типов. Here is a second-level head. но не являются дочерними объектами этих тегов не оказывает воздействия на следующий блок HTML-кода: <td> This i s unformatted t e x t with <em>emphasis</em>. It doesn't follow a Erst-level head Here is a first-level head. которые следуют за другими тегами.д. являющимся дочерними элементами ячеек таблицы. Просто разделите селекторы с помощью запятых. h2 + h3. </td> Как и с другими типами селекторов. Рассмотрим следующий пример: p i .: hi + h2 + h3 + h4 + p { font-weight: bold. .Строим Web-сайты 238 Е» Е* XN» Favortes look a* Here is a paragraph. Данное правило стиля применяется ко всем абзацам. Here is a paragraph that follows a paragraph. Here is a paragraph that follows a first-level head.4. всем заголовкам третьего уровня. и ко всем тегам <strong>.

. td > strong { color: #FF0000. hi { color: #FFO0O0. не забудьте. но она не отличается лаконичностью: Р ( color: #FF0000.ГЛАВА 45. совершенно не жертвуя точностью определений. что можно написать очень эффективные правила стилей. Изменение внешнего вида текстового элемента 239 Следующая таблица стилей оказывает тот же самый эффект. если для вас она представляет более понятное описание стилей. используйте длинную форму записи. Но после того как вы привыкните к синтаксису каскадных таблиц стилей. h2 + h3 { color: #FF0000. Конечно.

который не обязательно должен применяться к какому-либо определенному HTML-тегу или к конкретной последовательности тегов. называемый классом.это что-то типа клуба. Чтобы «пригласить» HTML-тег в клуб. Правило стиля для типичного класса выглядит похожим на следующий пример: . размеченного HTML-тегами.bolditalic { font-weight: bold. если требуется определить стиль. Просто определите свой собственный селектор стиля. Определение стилей классов В главе 45 объяснялось. b o l d i t a l i c . font-style: italic.ГЛАВА46. в который может «вступить» любой HTML-тег. Класс каскадных таблиц стилей . Просто приведите имя без точки. А что происходит. Придумайте имя для своего класса и поставьте точку перед ним. Определение Класс — это специально создаваемый селектор стиля. Совет При заполнении атрибута класса для HTML-тега не включайте точку а начале имени класса. как в листинге 46. заполните для тега атрибут класса. . но членство допускается только по приглашению.1. который не обязательно должен применяться к какому-либо определенному HTML-тегу или логической последовательности тегов? Не стоит бояться. как с высокой ТОЧНОСТЬЮ переопределять внешний вид текста. как это сделано в предыдущем фрагменте кода для имени класса . Каскадные таблицы стилей выручат вас.

font-style: italic. Помните. 46.</p> paragraph belongs to the bolditalic <p>This paragraph does not.1 следует отметить пару интересных моментов.</hl> first-level heading belongs to the <h^>This first-level heading does not. This paragraph does not. </style> <hl class="bolditalic">This bolditalic class. Определение стилей классов Ejle Ed* View Favotites 241 loots НЫр This first-level heading belongs to the bolditalic class.1 <style type="text/css"> . Исходный код страницы. стиль класса можно использовать для любого типа тега. стиль класса не переопределяет используемый по умолчанию внешний вид тегов в браузере. • This first-level heading does not.</p> В коде листинга 46. что класс подобен клубу. Во-вторых. Ibis paragraph belongs to the boUitalic class. если только стиль прямо . Во-первых.</hl> <p class="bolditalic">This class.1.bolditalic { font-weight: bold. Рис.ГЛАВА 46. к которому хотите применить класс Листинг 46. в который может «вступить» любой тег. После определения стиля класса поместите его имя в атрибут класса того тега.1. вид которой в браузере показан на рисунке 46.

Если в требуемом месте нет тега. Заголовки первого уровня отображаются полужирным шрифтом по умолчанию.</p> <span>text</span> t h a t belongs to the Тег <span> не оказывает видимого эффекта в окне браузера. входящий в клуб. когда тег установлен в надлежащем месте. чтобы только слово «text» вошло в клуб bolditalic (полужирный ку| >сив)? Атрибут класса нельзя определить. используемого браузером по умолчанию для заголовков первого уровня. поместите тег <span> точно там. т.к. 46.Строим Web-сайты 242 не противоречит стандартным настройкам браузера.</p> Результат выполненных действий показан на рисунке 46. Для решения этой задачи потребуется тег <span>. можно сделать запрос на вхождение тега <span> в клуб: <p>This paragraph c o n t a i n s <span class="bolditalic">text</spai> t h a t belongs t o t h e b o l d i t a l i c class. поскольку определение стиля опровергает стандартный выбор полужирного начертания. Если бы стилем класса было задано нормальное начертание шрифта. а не только слово «text». отображался бы нормальным. поставленный в нужном месте: <p>This paragraph c o n t a i n s b o l d i t a l i c class. This paragraph contains text that belongs to the bolditaic class Puc. поэтому тег <hl>.это разметка сегмента или диапазона (span) содержимого. тогда текст. полужирным он уже является.</p> text that belongs to the bolditalic Определение Диапазон — это сегмент содержимого. >. а не полужирным шрифтом. Теперь. идентифицируемый в HTML документе тегами <span>. Теперь рассмотрим следующий абзац: <p>This paragraph contains class. где он необходим. размеченный тегом <h 1.2. просто становится курсивным. Как сделать так. а затем внесите тег <span> в свой стиль класса . тогда весь текст абзаца стал бы полужирным и курсивным. Его единственное назначение .2.

а только на те абзацы.l e v e l heading belongs to the class.</p> paragraphs can join the p .3. в которые могут войти только теги определенного типа. 46. font-style: italic. Исходный код страницы. которому могут принадлежать только теги этого определенного типа .ГЛАВА 46. Определение стилей классов 243 Формирование привилегированного клуба ЕСЛИ обычные СТИЛИ классов подобны клубам. Рис. b o l d i t a l i c <p>This paragraph opts not to join. если только вы не добавили их в селектор стиля. в которые может «вступить» любой тег. Заголовки первого уровня. but it doesn't get any of the benefits.bolditalic { font-weight: bold. Такое правило стиля выглядит следующим образом: p. можно создать стиль класса.</p> <hl class="bolditalic">This f i r s t . Листинг 46. Так можно создать стиль класса. but i t doesn't get any of the benefits. } • На рисунке 46. который не воздействует на все абзацы в документе.</hl> Only paragraphs conjoin the p. которые принадлежат классу. вид которой в браузере показан на рисунке 46. Объединяя селектор тега с именем класса. so i t doesn't enjoy the bene-f i t s of membership. заголовки второго уровня и все остальные не могут принадлежать этому классу.3 <р class="bolditalic">Only class.bolditalic class. because i t i s n ' t a paragraph. This first-level heading belongs to the class. то можно также определить привилегированные клубы.2.3 показан результат действия этого стиля.

Совет При заполнении атрибута класса не включайте селектор тега в имя класса. Просто введите имя класса. Просто добавьте точку и имя класса после селектора. но браузер полностью игнорирует этот тег. Дополнительные сведения о типах селекторов смотрите в главе 45. . что данные элементы отображаются с полужирным начертанием по умолчанию. браузер по-прежнему отображает заголовок первого уровня полужирным шрифтом. но это обусловлено тем. контекстно-зависимый. дочерний или братский) может иметь специальное обозначение класса. Совет Любой тип селектора тега (простой. относящегося к тегу.244 Строим Web-сайты Как можно заметить. поскольку он не является абзацем. ничто не препятствует тегу <hl> присоединиться к классу. Коне «но. Полужирное начертание здесь никак не связано с таблицей стилей.

Атрибут font . Управление шрифтом Обычно для отображения текста браузером на компьютерах с операционной систе-' мой Windows почти всегда используется по умолчанию шрифт Times New Roman. Тег шрифта работает следующим образом: <р> <font face="Arial">3TOT абзац отображается шрифтом Arial. позволяющий изменять гарнитуру для определенной части текста. </р> или стиля класса: . что имя шрифта помещено в кавычки в определении CSS-стиля. как в первом примере каскадных таблиц стилей. Совет Если имя шрифта состоит из нескольких слов.ГЛАВА 47.</hl> <р>Как и этот абзац. который вы хотите использовать. как Times New Roman или Courier New. удостоверьтесь в том.</font> </р> Значением атрибута face является имя шрифта.arialtext { <font family: Arial. При каждом добавлении на страницу абзаца он автоматически отображается со шрифтом Arial. Изменяя положение тегов <f ont>. можно забыть об этих раздражающих тегах <f ont>. Каскадные таблицы стилей облегчают также управление шрифтом. можно применять шрифт к нескольким текстовым элементам подряд: <font face="Arial"> <п1>Этот заголовок отображается шрифтом Arial. нет необходимости использовать тег < f ont >.f ami ly выполняет ту же функцию.</р> </font> Но теперь. Если правило стиля определено так. что все абзацы отображаются шрифтом Arial. когда имеются каскадные таблицы стилей. Атрибут можно добавить в определение стиля HTML-тега: <Р> <font family: Arial. В HTML существует тег шрифта. .</р> <р>Как'и этот абзац.

как Arial. Не важно. . Итак. чтобы весь текст на странице отображался шрифтом Arial.246 Строим Web-сайты Теперь стало лучше. Шрифт с засечками (serif). вы хотите. какие шрифты имеются на компьютере посетителя? Краткий отиет: узнать невозможно.1. Просто поместите атрибут f o n t . Скажем. как узнать. связанных со шрифтами Чтобы тег <font> и атрибут f o n t . имеется ли этот шрифт на вашем компьютере. Главное. В моноширинном шрифте все буквы имеют одинаковые интервалы между знаками для имитации стиля печатной машинки Определение Шрифт без засечек (sans serif) такой.1. а шрифт без засечек не имеет таких украшений. практически всегда имеются на большинстве компьютеров. Смотрите также рисунок 47. Все типовые персональные компьютеры поставляются со стандартными шрифтами. • Моноширинный шрифт. чтобы шрифт присутствовал на компьютере посетителя. Times New Roman. serif sans-serif monospaced Рис. например. стилизован под шрифт печатающей машинки.f a m i l y работали корректно. Шрифт с засечками отличается наличием мелких украшений на концах букв. Courier New.f a m i l y в правило стиля для тега <body>: body { N <font family: Arial. Устранение ошибок. Гарнитуры. где между любыми знаками и символами сохраняется одинаковый интервал. перечисляемые в таблице 47.1. Но пусть это не мешает вам сформулировать некоторые обос нованные предположения. например. 47. не имеет небольших элементов украшения на концах букв. на компьютере посетителя должен иметься указываемый вами шрифт. имеет такие засечки на концах букв.

за ним его эквивалент для операционной системы Мае. текст отображается шрифтом без засечек. Просто укажите свои предпочтения в некотором порядке. Helvetica. Наиболее распространенные шрифты. и в конце приводится обобщенная категория шрифта: serif (с засечками). Управление шрифтом 247 Чтобы дополнительно минимизировать риск отсутствия шрифта. Helvetica. Табл. Если и в этом случае попытка заканчивается неудачей. Если на компьютере посетителя нет шрифта Arial.f a m i l y .1. можно задавать диапазон предпочитаемых шрифтов в теге <font> или CSS-атрибуте f o n t . Совет Продуманный список предпочитаемых шрифтов должен составляться таким образом: сначала указывайте шрифт Windows. рекомендуемые для использования на Web-страницах Шрифт Windows Шрифт Macintosh Категория Times New Roman Times С засечками Arial Helvetica Без засечек Georgia Times С засечками Verdana Geneva Без засечек Courier New Courier Моноширинный В этих случаях браузер сначала пытается визуализировать текст с помощью шрифта Arial.ГЛАВА 4 7 . sans serif (без засечек) или monospace (моноширинный). sans-serif"> или: body { font-family: Arial. разделяя названия шрифтов запятыми: <font face="Arial. . используемым по умолчанию. sans-serif. браузер пробует найти Helvetica. 47.

• Шрифты без засечек обычно чаще. как Times New Roman. скажет вам. как Verdana или Georgia. игровым содержанием. . хороши для Web-сайтов с серьезным содержанием. Если все остальные шрифты. Точнее они соответствуют шрифтам с засечками. что сужает возможности дизайна. Выбор наилучшей гарнитуры Любой художник-дизайнер. sans-serif или monospaced в зависимости от типа шрифт \. лучше использовать для малых размеров шрифта. который желательно использовать для отображения текста браузером. • Шрифты без засечек. которые выполнены шрифтом комиксов. моноширинному. без засечек. выбрать надлежащую гарнитуру дизайнеру помогает размер текста. Вызов шрифта по его типу представляет собой безотказный вариант. • Широкие гарнитуры. Эти три общие категории шрифта не связаны с какой-либо конкретной гарнитурой. лучше подойдут для Web-сайтов с легким. легкого чтива. будут отсутствовать на компьютере посетителя. При больших размерах шрифта эти гарнитуры выглядят чрезмерно большими. но одновременно облегчает задачу выбора правильной гарнитуры. как дизайн книг. Если планируется сделать книгу в виде серьезного. Ниже перечисляется несколько практических правил по выбору гарнитуры: • Шрифты с засечками. Web-оформление не так сложно. используемым по умолчанию на компьютере посетителя. как CSS (каскадные таблицы стилей). занимающийся разработкой стиля книги. вы гарантируете. что гарнитура играет большую роль в создании профессионального вида книги. такие. • Шрифты с засечками и стандартными размерами делают большие фрагменты текста удобными для чтения. используют для заголовков. и количество устанавливаемых параметров не так велико. Вряд ли найдется много книг по философии Гегеля. Здесь гораздо меньше набор гарнитур. как Arial. такие. авторитетного исследования либо беззаботного. чем шрифты с засечками. которая визуально создает соответствующее настроение и ощущение. указываемые вами.Строим Web-сайты 248 Совет В конце списка предпочитаемых шрифтов всегда включайте категорию serif. дизайнер пытается выбрать гарнитуру. Некоторые гарнитуры хорошо подходят для малых размеров в силу своей удобочитаемости. такие. Кроме того. даже в таком надежыои языке. что в браузере будет отображаться текст с помощью шриф-а требуемой категории. тогда как другие гарнитуры по той же причине лучше использовать для больших размеров шрифтов.

Как показано на рисунке 48.1. ни дюймами. sans-serif" size="4"> Значение. пронумерованных числами от 1 до 7 . Helvetica. Следуя аналогичным правилам. ни миллиметрами. При использовании тега <font> для выбора доступны только семь типов размеров. минимальный размер текста равен 1. Другим возможным значением атрибута s i z e является относительный размер. 48.s i z e каскадных таблиц стилей.1. не является ни пикселами. ни милями. в котором размер шрифта выражается как некоторое число плюс или минус текущий размер. ни футами. указываемое в атрибуте size. Таким образом. использование тега < font > Атрибут s i z e тега <f ont> выглядит подобно следующему примеру: <font face="Arial. можно задавать размер шрифта в атрибуте s i z e тега <font> или в атрибуте f o n t . sans-serif" size="+l"> или <font face="Arial. данный текст с размером 4 на один размер больше обычного текста. ни пунктами. Helvetica. Управление размером шрифта В главе 47 объяснялось. как с помощью тега <font> в HTML и атрибута font-family в каскадных таблицах стилей (CSS) можно задавать гарнитуру шрифта текста на Webстранице. Helvetica. Вместо этого размер соответствует одному из семи предопределенных размеров текста в HTML. а максимальный размер — 7. sans-serif" size="-3"> File £dft View Favorites tools Few St* 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 Рис. В языке HTML относительный размер описывается таким образом: <font face="Arial.ГЛАВА 4 8 . Обычный текст на Web-странице отображается с размером 3.

который можно получить с помощью HTML. Поскольку браузеры предоставляют неполную поддержку каскадных таблиц стилей и поскольку не существует двух браузеров. что браузеры игнорируют единицы измерения em и ex. которые хотите использовать: Р font-family: font-size: A r i a l . Часто задаваемые вопросы Можно ли получить более семи типов шрифта в HTML? Сообразительные Web-дизайнеры пытаются выжать из HTML до полнительные размеры шрифта путем установки в теге <fon t > размера 7 в качестве начального значения и затем сразу увеличивая размер с помощью относительного тега шрифта. использующими данное правило стиля. использование атрибута font-size ЕСЛИ семь размеров шрифта кажутся вам нелепым ограничением. Каскадные таблицы стилей спасают положение. Если вы относитесь к таким умельцам. отображается в браузере так. лучше придерживаться относительных единиц измерения для размера шрифта текста. чтобы увеличить размер выше 7 (или уменьшить менее 1). В таблице 48. одинаково реагирующих на изменение размеров.s i z e в определение своего стиля и укажите значение и единицы измерения. тогда как во втором примере шрифт уменьшается на три размера. которые добавляют ся.Строим Web-сайты 250 В первом примере шрифт увеличивается на один размер относительно размера предыдущего текста. Как показано в таблице 48.1 сведены разнообразные единицы измерения размера шрифта. Текст. .1. Минимальный относительный размер равен -6. ex и рх. размеченный тегами абзацев. можете порадоваться своей хитрости. однако хорошо известно.2. Максимальный размер. относительными единицами измерения являются em. sans-serif. предлагая практически неограниченное число размеров шрифта. Helvetica. вы не одиноки в своих чувствах. 18px. но. п сожалению. равен 7. что изменение размера шрифта в браузере связано с определенным риском. браузер не поддается на такие уловки. Браузером игнорируются относительные значения. а максимальный относительный размер равен +6. как показано на рисунке 48. Вследствие этого в качестве единственной реальной альтернативы остаются старые добрые пикселы. которые предоставляются в каскадных таблицах стилей. Однако знайте. Просто добавьте атрибут f o n t .

Единицы измерения длины в каскадных таблицах стилей Единицы измерения Описание Категория cm Сантиметры Абсолютные em Эм. разрешающей способностью экрана определяется размер пиксела. Нет ничего удивительного в том. 48. Относительные единицы измерения позволяют браузеру подстраиваться под конкретные настройки экрана посетителя. как пункты. Вместо этого фактический размер единиц измерения зависит от ряда факторов.23 мм) Абсолютные pt Пункты Абсолютные px Пикселы Относительные Относительные единицы измерения не являются относительными в том смысле.2.1. вид Web-страницы полностью находится во власти браузера. пайки или дюймы. который определяет. Управление размером шрифта 251 This paragraph appears in 18-pixel Arlal. насколько большим должен быть дюйм на экране. размер пикселов будет больше. С помощью каскадных таблиц стилей можно задавать любые размеры шрифта с разнообразными единицами измерения Табл. 1 эм равен приблизительно ширине заглавной буквы М Относительные ex Х-высота. Рис.ГЛАВА 48. So does this one. что размеры обоих экранов одинаковы. что их значения изменяются. такие. в предположении. чем на экране монитора. Если вместо относительных единиц используются абсолютные единицы измерения. отображающего 1600 х 1200 пикселов. . 1 ех равен приблизительно высоте строчной буквы х Относительные in Дюймы Абсолютные mm Миллиметры Абсолютные pc Пайки (1 пайка содержит 12 пунктов и равна 4. Например. Если на экране монитора отображается 800 х 600 пикселов. 48. So does this paragraph.

"> This type s i z e i s x .l a r g e и xx-large. которые приблизительно соответствуют семи размерам шрифта в HTML Семь констант длины. показанным на рисунке 48. This paragraph is medium This paragraph is large.3.</span> . Можно также задавать относительную константу длины для настройки величины шрифта относительно его текущего размера. каким бы он ни был. использование констант длины В каскадных таблицах стилей ЕСЛИ задание размеров шрифта с помощью относительных или абсолютных единиц не привлекает вас из-за возможных проблем. подобно следующему примеру: Р ( font-size: x-large. medium. можно подставить одну из семи констант длины в каскадные таблицы стилей.s i z e : x-large. используемые в каскадных таблицах стилей. " > t h i s type s i z e i s one s i z e smaller. и посетители могли видеть страницы с неразборчивым мелким т< истом.3. This paragraph is xx-large. small. или воспользуйтесь ключевым словом smaller. Одно из этих ключевых слов помедцаетс^ в определение стиля вместо значения размера и единиц измерения. это: хх-small xsmall. чтобы увеличить размер шрифта на один размер. чтобы сделать шрифт на один размер меньше: <р s t y l e = " f o n t . В случае сомнений каскадные таблицы стилей предоставляют семь констант длины. но в этом способе вы не оставляете браузеру шансов отобразить Web-страницу с неразборчивым текстом.s i z e : s m a l l e r .l a r g e . вы снова вовлечены в «игру» с размерами. как сейчас. Рис. 48. Вы догадываетесь: эти константы приблизительно эквивалентны семи размерам шрифта в HTML. This paragraph is x-laige. x . large.252 Строим Web-сайты что в прежних браузерах поддержка параметров оборудования не была такой хорошей. This paiagraphis small. but <span s t y l e = " f o n t . Используйте ключевое слово l a r g e r . Таким образом. который невозможно было увеличить.

Конечно. что изменение размера шрифта не вызывает проблем. связь между эффективным дизайном и удобством пользования является нетривиальной. компьютеров Macintosh. Однако если вы ожидаете. Это заключение основывается на предположении. Это не является рекламой программного продукта. что задание размера шрифта с помощью относительных единиц измерения является достаточно надежной технологией для Web-сайтов общего назначения. то этим стоит заняться. проблема для большинства практических случаев решена. по-видимому. несмотря на возможные противоречия с внутренним эстетическим чувством Web-дизайнера. если изменение размеров шрифта помогает сделать Web-сайт более удобным для большей части вашей аудитории. если пользоваться только относительными единицами измерения. Другие советуют придерживаться констант длины. и точка». следует считать. Это простая констатация существующего факта. что на ваш Web-сайт будет заходить много посетителей с карманных компьютеров. Главная цель Web-сайта — представление информации. Управление размером шрифта 253 Дневник: способ изменения размера шрифта Разные дизайнеры ПОДХОДЯТ К проблеме задания размера шрифта в каскадных таблицах стилей по-разному. Таким образом. управляемых операционными системами Windows. Третьи утверждают.. Эта тема здесь не обсуждается. бороздящих Интернет с помощью более или менее современных браузеров. с помощью браузеров Netscape или Windows-браузеров старых версий. .вдаваться в тонкости шрифтового оформления Web-страниц. Основываясь на подавляющем числе пользователей. следует прислушаться к мудрым советам консерваторов и не варьировать размеры шрифта текста. и другое дело .ГЛАВА 48. Однако одно дело стремиться к эффективному и интуитивно понятному графическому макету. Некоторые говорят: «Никогда не изменяйте размер шрифта. Таким образом. Последняя пара версий Internet Explorer для Windows обрабатывает в каскадных таблицах стилей единицы измерения в виде пикселов достаточно хорошо. что большинство посетителей Web-сайтов пользуется браузером Microsoft Internet Explorer на настольных или переносных компьютерах. поэтому оно обязательно должно быть удобочитаемым. Представляемое содержимое должно быть легко доступно и удобно для пользования. Любые аспекты эстетики и дизайна должны всегда подчиняться требованиям практичности.

Они предоставляют все виды управления зазорами: пространство вокруг элементов. например. У этого абзаца задано нижнее поле в 200 пикселов. что предлагаются в HTML. в особенности те из них.ГЛАВА 4 9 . В браузер встроены механизмы. This paragraph has a bottom margin of 200 pixels This is the end of the paragraph This is the beginning of the next paragraph. пространство также важны. интервалы между строками текста. Художники-дизайнеры понимают. позволяющие представлять. но это грубый и неточный метод.1. Поля можно применять к любому элементу. чтобы начать желать лучших параметров для управления зазорами. что пустое. или положительное. что есть каскадные таблицы стилей. Конечно. или отрицательное. как занятое. которое создает приятное для глаз пустое пространство для отделения абзаца от следующего за ним текста . Не требуется разрабатывать много Web-страниц. пространство внутри элементов. В главе 26 обсуждается вопрос задания полей страницы с помощью каскадных таблиц стилей. как выглядит текст. зазоры между словами и интервалы между буквами. регулируемых с помощью каскадных таблиц стилей. пространство. как показано на рисунке 49. которые относятся к тексту. В этой главе рассматриваются другие виды зазоров. размеченный каждым тегом. так. after a healthy stretch of white space Рис. чем те. можно сделать принудительный обрыв строки с помощью тега <br>. тем самым регулируя свободное пространство вокруг элемента. Пробелы являются крайне важным элементом дизайна. и они требуют управления с точностью до пиксела. Хорошо.1. Управление интервалами В HTML величина зазора между элементами в достаточно большой степени определяется браузером. 49. Управление пространством вокруг элементов Атрибуты полей в каскадных таблицах стилей применяются не только к границам страницы.

Если вы будете придерживаться такого правила. соответственно. . как в следующем примере кода: margin: 200px. Можно также задавать четыре разные значения. нижнее и левое поля. Как видно из кода для Web-страницы. у вас не возникнут проблемы.. а также левое или правое поле. Другими словами. а в другом элементе нижнее поле.ГЛАВА 49. как в следующей строке кода: margin: 100 50 2V0 25рх. Атрибуты могут иметь разные значения и единицы измерения (таблицу единиц измерения. правое. Указывайте лишь поля. показанной на рисунке 49. когда 200-пиксельное нижнее поле стыкуется с 200-пиксельным верхним полем.<7p> <p>This is the beginning of stretch of white space.</p> the next paragraph. скажем. см.">This paragraph ha.s a bottom margin of 200 pixels. действующих в каскадных таблицах стилей. вид которой в браузере показан на рисунке 49. after a healthy Совет При добавлении пустого пространства с помощью полей к нескольким элементам обычно рекомендуется выбирать верхнее или нижнее поле.1. представляющие верхнее. margin-bottom. Совет Для быстроты можно использовать групповой атрибут margin. и последовательно придерживаться сделанного выбора для каждого правила стилей элементов. которые необходимы для создания требуемых отступов. образуя зазор в 400 пикселов. в главе 48). Управление интервалами 255 Листинг 49. можно не задавать все атрибуты полей. Исходный код страницы. При указании единственного значения для этого атрибута создаются равные поля со всех четырех сторон элемента. не задавайте в одном элементе верхнее поле. This is the end of the paragraph. Существует четыре атрибута полей: margin-top.1 <р style="margin-bottom: 200 px. margin-left и margin-right.1.

а можно не указывать в определении стиля те из них. С помощью набивки добавляется пробел между краем прямоугольника и содержимым внутри его Как и в случае полей.2. This is a paragraph. как те. This is a paragraph. padding: 10 12 18 8рх. ttis is a paragraph. полное представление о том. набивки сверху. указывайте одиночное значение. что показаны на рисунке 49. существует четыре атрибута набивки: padding-top. в каскадных таблицах стилей предоставляется групповой атрибут padding. paddingbottom. . чтобы добавить равную набивку со всех четырех сторон. Управление междустрочными интервалами Используйте атрибут l i n e . как. Чтобы получить боле*. This is a paragraph. This is a paragraph. представьте. или задавайте четыре разные значения длг. This is a paragraph. на рисунке 49. Этот прием удобен для улучшения удобочитаемости длинных фрагментов текста. This is a paragraph. как работает набивка. справа. This is a paragraph. padding-left и padding-right. например.Строим Web-сайты 256 Управление пространством внутри элементов Атрибуты набивки определяют величину пробела между границами элемента и началом содержимого элемента. padding-left: 10px. Он работает аналогичным образом. что каждый элемент на экране имеет свой собственный невидимый прямоугольник. This is a paragraph. снизу и слева: padding: 20рх. которые вам не нужны: Р ( padding-top: 20px. Рис. ф—#irst-level heading?—f -s [3 Й This is a paragraph.3. This is a paragraph. This is a paragraph.h e i g h t для управления величиной зазора между строками текста. Каждый из атрибутов можно задавать отдельно. Набивка определяет величину пробела между внешней границей элемента и содержимым внутри границ Совет Как и в случае полей.2. This is a paragraphJQ— This is a paragraph. 49.

This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph. This is a long p«ragraph.This is a long paragraph Ibis is a long paragraph. этот атрибут отличается тем. Tliis is a long paragraph. Управление интервалами 257 Для атрибута l i n e . This is a long paragraph.4. следующее определение стиля: word-spacing: Зрх. что браузер добавляет указанное вами значение к зазору между словами. В современной электронной верстке о свинцовых полосках уже давно забыли. Tlii« is a long paragraph. В издательском деле под интерлиньяжем (leading) понимается величина интервала между строками текста. This is a long paragraph. Tliis is a long paragraph. This is a long paragraph This is a long paragraph This is a long paragraph. This is a long paragraph. Для определения зазоров между словами используется атрибут w o r d . This is a long paragraph. С увеличением междустрочного интервала улучшается удобочитаемость текста.h e i g h t указывается значение и единицы измерения. рассматривавшихся до сих пор. От других атрибутов. определение стиля: . Какой из абзацев вам было бы удобнее читать ? Управление зазорами меЖду сдобами Еще одним способом улучшения удобочитаемости. является увеличение зазоров между словами. Tliis is a long paragraph. Таким образом. как в следующем примере: Р { font-size: 18px. 49. а добавляет в зазор между словами три дополнительных пиксела. File gdt View Favorites Tools Help Tliis is я long paragraph. Tins is a long paragraph. This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph. Tliis is a long paragraph. This is a long paragraph. This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph This is a long paragraph. Tliis is a long paragraph.This is a long paragraph. В старые времена. Tliis is a long paragraph. что и интерлиньяж? Да.3. но термин остался. This is a long paragraph.This is a long paragraph. This is a long paragraph. как на рисунке 49. line-height: 27px. This is a long paragraph. когда работнику типографии требовалось добавить зазор между строками текста. This is Рис.s p a c i n g . This is a long paragraph. This is a long paragraph This is a long paragraph. Tliis is a long paragraph. используемому по умолчанию. Часто задаваемые вопросы Является ли атрибут line-height в каскадных таблицах стилей тем же самым. он вставлял тонкие свинцовые полоски (lead plug).ГЛАВА 49. This is a long paragraph This is a long paragraph This is a long paragraph. не устанавливает зазор между словами равным 3 пикселам. This is a long paragraph.This This is a long paragraph. Подобным образом.

при которых используемый по умолчанию зазор между буквами уменьшается на задаваемую величину.5. используемому браузером по умолчанию.s p a c ing. чем размер шрифта. Например. ЕЬ Е* »sw Fjycrtc lock Thli piugriph h i i «xtrj word spjcing. Сбвет Когда встречаются большие фрагменты экранного текста. Пример изменения зазоров между буквами показан на рисунке 49. удаляет три пиксела из зазора. This pjfigijph his extrj word ipiolng. точно такой же интерлиньяж. This pjrjgrjph doesn't uv* »vfrj word sptoirtfl. какой вы использовали в своих институтских рефератах. Thii pjrjjrjph doatn't hju» ixti* word «piolne. Всего те/ж пиксела дополнительного зазора между словами делают левый абзац более удобочитаемым Управление зазором меЖду буквами Наконец. Атрибут может принимать и отрицательные значения. Для установки двух интервалов умножьте размер шрифта на 2. если размер шрифта равен 10 пикселам. TSu p*r»gr*ph hл ixtr* word fpicing. Thif piugnph dO'«n't hiv* *xtrj wold ipioing. согласно которому необходимо задавать междустрочный интервал в полтора раза большим. Thif pirjgrap e»«ti^ h*v« «xlrj i*ordfpi«ing.s p a c i n g добавляется к зазору между буквами. введите следующий код в определение стиля: word-spacing: normal. Thtt piugupn h » *xtu «void fpioing. попробуйте два интервала. Чтобы установить зазор между словами равным значению. задайте междустрочный интервал равным 15 пикселам Если требуется еще больший междустрочный интервал. . используемому в браузере по умолчанию. следует руководствоваться практическим правилом. Как и в случае атрибута w o r d .spac i n g .258 Строим Web-сайты word-spacing: -Зрх. каскадные таблицы стилей позволяют регулировать величину зазора между буквами в HTML-элементе с помощью атрибута l e t t e r . значение атрибута l e t t e r . . и полученное значение задайте в качестве междустрочного интервала. что приводит к сжатию строк текста.

как правило. в большинстве случаев выигрывают от небольших дополнительных зазоров между словами.5. Кроме того. чтобы увеличить (илиуменьшить) в элементе зазор между буквами. используемых браузером по умолчанию. Применяйте атрибут letter-spacing. улучшают удобочитаемость мелкого текста. THIS HEADING LOSES SOME LETTER SPACE THIS HEADING USES STANDARD LETTER SPACING Puc. Verdana. например. -. . Кроме того.s p a c i n g выглядит подобно следующему примеру: letter-spacing: lpx.л или для установки зазоров между буквами. можно воспользоваться следующим кодом: letter-spacing: -lpx. Управление интервалами 259 Совет В общем случае для шрифта больших размеров требуются меньшие зазоры между словами. вставьте следующую строку: letter-spacing: normal. 49. широкие шрифты. используемый браузером по умолчанию Совет Увеличенные зазоры между буквами. тогда как для шрифтов малого размера необходимы большие зазоры. тогда как для крупного шрифта лучше подходят уменьшенные зазоры между буквами. чтобы уменьшить зазор между буквами. тогда как для гарнитур с узкими буквами четкость текста выиграет от уменьшения зазоров между буквами. В определении стиля атрибут l e t t e r .ГЛАВА 49. или. гарнитуры с широкими буквами лучше смотрятся с увеличенными зазорами. тогда как сжатые шрифты смотрятся лучше со слегка уменьшенными зазорами.

ТЫ is a paragraph This IS a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph ТЫ:. не является очень сложным.1.</р> Однако каскадные таблицы стилей делают этот метод устаревшим. </р> j u s t i f y .1. is a paragraph This is a paragraph Puc. Встроенный в браузер механизм расчетов.ГЛАВА 50. в результате блоки текста с выключкой часто выглядят на Web-страницах напыщенными в худшем смысле этого . " > Этот абзац содержит текст с вык- Совет в копилку опыта. Для создания такого эффекта в более короткие строки браузером добавляются дополнительные пробелы. в теге выравниваемого абзаца для атрибута a l i g n следует указать значение j u s t i f y : <р align="justify">Этот абзац содержит текст с выключкой.a l i g n : лючкой. Определение Выключенные строки текста имеют одинаковую длину. как показано в примере абзаца на рисунке 50. Для абзаца слева установлено выравнивание с выключкой. 50. чтобы все строки были одинаковой длины Чтобы задать в HTML выключенный текст. При выравнивании с выключкой браузер дополняет короткие строки с пробелами так. is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph ТЫ:.a l i g n : <р s t y l e = " t e x t . используемый для выравнивания текста. Управление Выравниванием текста Выключенные строки текста имеют одинаковую длину. Вместо этого включите в свое определение стиля CSS-атрибут t e x t .

легче читается на экране монитора. В тексте с выравниванием по центру (ragged center) строки центрируются. а правый край остается невыровненным. при этом невыровненным остается левый край. Определение Текст без выключки вправо (ragged right) выравнивается по левому краю. и справа находится абзац без выключки влево . 50. It is It really is I can't stress that enough This is a paragraph It is. Определение По визуальному восприятию противоположным для текста с выключкой является текст без выключки. без выключки влево и выравнивание по центру. в абзацах без выключки влево строки выравниваются по правому краю. Управление выравниванием текста 261 слова и по своему виду уступают даже самой отсталой провинциальной газете.2.2. который в большинстве случаев лучше смотрится на экранах мониторов. а правый край остается невыровненным. Часто. как известно. It really is. а невыровненным остается левый край. Слева показан абзац без выключки вправо. выключка придает стильный вид книгам и другим печатным материалам. It really is. как правило. что существует три вида выравнивания без выключки: без выключки вправо. I t a . а удобочитаемость. по центру располагается абзац текста с выравниванием строк по центру. чем блоки текста с одинаковой длиной (с выключкой). Текст без выключки влево (ragged left) выравнивается по правому краю. Абзацы без выключки вправо выравниваются по левому краю.ГЛАВА 50. File Ed* Vie» Favorites This is a paragraph. профессионально и точно. по важности превалирует над всеми остальными свойствами экранного шрифта. как показано в примере на рисунке 50. когда все сделано правильно. следует упомянуть. 1 can't stress that enough Lools •ЙШЕЯ #1 Help This is a paragraph. По умолчанию браузеры отображают текст без выключки вправо. I can't stress that enough Рис. Однако текст без выключки. а края строк остаются невыровненными. Говоря о тексте без выключки. а строки текста центрируются так. При выравнивании строк по центру оба края абзацев выглядят рваными.

правильное значение для атрибута a l i g n в HTML или значение атрибута t e x t . возможно именно так размышляли разработчики HTML и каскадных таблиц стилей.a l i g n : абзац выровнен справа.</р> .</р> <р s t y l e = " t e x t . поэтому с этой точки зрения запись t e x t a l i g n : l e f t . Для текста без выключки вправо правильным значением будет l e f t (влево). для которого атрибуты принимают значение center: <р align="center">3TOT абзац выровнен по центру. выглядит вполне логичной. попробуйте представить это с точки зрения стороны.">Этот абзац выровнен слева.a l i g n : center.</р> Если у вас возникает путаница в связи с таким противоречием между задаваемым типом выравнивания и присваиваемым значением.262 Строим Web-сайты При задании выравнивания текста без выключки фактически необходимо действовать прямо противоположно логике.a l i g n в каскадных таблицах стилей должно быть противоположным тому. а для текста без выключки влево правильное значение — r i g h t (вправо): <р align="left">3TOT <р s t y l e = " t e x t . а именно. по которой выравнивается текст. Эти рассуждения не касаются выравнивания по центру.">Этот абзац выровнен по центру.</р> right. что следует получить на самом деле. В абзацах без выключки вправо текст выравнивается по левой стороне.

2.L Первоначально предполагалось. Blah blah blah blab blah Blah blah blah blab blah Blah blah blah blah blah Blah blah blab blah blah Blah blah blah blah blah Blah blah blah blah blah. во многом к неудовольствию тех. Blah blah blah blah blah Blah blah blah bUh blah. что тег <blockquote> будет применяться для смещения отдельного блока жранного текста.2. Строго говоря. пример которых показан на рисунке 51. они прежде применяли тег <blockquote> для быстрого создания отступов. решая свои задачи в условиях дефицита времени. Blah blah blah blah blah Blah blah blah blah blah. который используют Web-дизайнеры. назначение тега <blockquote> — это смещение фрагмента экранного текста подобно цитате в начале школьного сочинения. применение которого противоречит требованию соблюдения стандартов. Blah blah blah blah blah Blah blah blah blah blah Puc. Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Puc.1. как на этом рисунке tie y<t Vew Favorite Blah blah headline Blah blah blah blah blah Blah blah blah blah blah. Paragraph paragraph paragraph. кто озабочен соблюдением стандартов Интернета . Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Paragraph paragraph paragraph. 51. Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph. Blah blah blah blah blah. ориентированный на результат метод. Пример такой цитаты показан на рисунке 51. The Bliss of Ignorance Ив vine dwells in a constant state of stupor shares much in common with the enlightened man. Paragraph paragraph paragraph. 51. Paragraph paragraph paragraph Paragraph paragraph paragraph. Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph. чем тот. Однако желательно найти более практичный. — Karl Save Paragraph paragraph paragraph Paragraph paragraph paragraph Paragraph paragraph paragraph. Управление отступами Стандартным решением при создании отступа с помощью средств HTML является использование тега <blockguote>. В руках хитроумных дизайнеров тег <blockquote> фактически превратился в инструмент создания отступов на странице. Озабоченные быстротой разработки.ГЛАВА 51.

Строим Web-сайты 264 В обоих случаях HTML-код выглядит одинаково.</p> <p>This paragraph i s indented. . Просто разместите теги <Ыос :quote> вокруг содержимого. В целом. Листинг 51. как показано в следующем примере кода: <blockquote> <p>This paragraph i s indented. С помощью атрибута margin-left обеспечивается изящное решение проблемы.1.</p> </blockquote> </blockquote> </blockquote> Тем не менее.</p> <p>This paragraph i s indented. Для каждого тега <blockquote> браузер просто отодвигает текст вправо на некоторое расстояние в соответствии с настройками по умолчанию. лучшим решением задачи создания отступа является использование каскадных таблиц стилей. обратите внимание.</p> </blockquote> Можно также применять вложение тегов <blockquote>. вид которой в браузере показан на рисунке 51.3. что отсутствует возможность задания точной величины отступа. пример которого показан на рисунке 51.3 <head> <style type="text/css"> margin-left: </style> </head> 50px. и такой способ предоставляет дополнительную гибкость в наст] к йкё точного значения отступа.</p> <p>This paragraph i s indented. Исходный код страницы. которое необходимо сдвинуть так. чтобы увеличить величину отступа: <blockquote> <blockquote> <blockquote> <p>This paragraph i s indented.</p> <p>This paragraph i s indented.

. Blah blah blah blah blah. будь то абзац. blah Blah blah blah blah blah blah Blah blah blah blah blah blah Blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah.i n d e n t .. 51. Blah blah blah blah blah Рис. Исходный код страницы... Blah blah blah blah blah Blah blah blah blah blah Blah blah Uah blah blah Blah blah blah blah blah Blah blah blah blah blah.2.</p> </body> ЕА $&» Favorites loots Blah blah headline Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah p blah Blah blah blah blah blah.ГЛАВА 5 1 . Они позволяют задавать дополнительный отступ для первой строки любого текстового элемента.. Для этого применяется атрибут t e x t .. действие которого показано на рисунке 51.4 <head> <style type="text/css"> text-indent: ЗОрх. Управление отступами 265 <body> <hl>Blah blah headline</hl> <p>Blah blah blah. вид которой в браузере показан на рисунке 51.3.4. заголовок или что-либо еще. Отступы Лучше создавать с помощью средств каскадных таблиц стилей..</p> <p>Blah blah blah. Такой метод позволяет задавать точное значение отступа Каскадные таблицы стилей справляются лучше с еще одной задачей. Листинг 51. </style> </head> .

Blah blah blah blah blah Blah blah blah blah blah. Blob blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blab blah blah blah Blah blsdi blah blah blah Blah blah blah blah blah Blab blah blah blah blah Blab blab blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah. Таким образом. 30 пикселов представляют 30 пикселов дополнительного отступа. а не вправо. 51. показанной на рисунке 51. что вторая и последующие строки текста выровнены по левому краю элемента. Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah b i n Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah Рис. Первая строка выглядит нависающей над левой границей текстового блока. общий отступ в первой строке текста будет равен 80 пикселам.Строим Web-сайты 266 <body> <hl>Blah blah headline</hl> <p>Blah blah blah. Используйте атрибут text:-indent для сдвига первой строки любого текстового элемента Обратите внимание. В исходном коде для Web-страницы.4. Атрибут находит подходящее применение в интересном трюке. использующем каскадные таблицы стилей: создании обратного отступа.. только наоборот: первая строка текста выступает влево относительно блока текста. отсюда еще одно название — висячая (hanging) строка. text-indent: ЗОрх. или 50 + 30.4. Атрибут t e x t .</p> </body> £ite £* View Favorites look Blah blah headline Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. ю установлено следующее правило стиля: Р { margin-left: 50рх..i n d e n t воздействует только на первую строку текста. Blah blab blah blah blah. Blah blah blah blah blah Blah blah blah blah blab Blah blah blah blah Hah Blah blah blah blah blah Blah blah blah blah blah. Обратный отступ похож на абзацный отступ. .. Blah blah blah blah blai. Для второй и последующих строк текста отступ уменьшается и составляет 50 пикселов. Blah blah blah blah blah Blah blah blah blah blah. если для абзаца б) i.

скажем. а не вправо. text-indent: -ЗОрх. -30 пикселов. Листинг 51. Затем задайте для атрибута t e x t indent отрицательное значение. Исходный код страницы. Blah blah blah blah blah. 51. Для создания обратного отступа установите стандартное левое поле для блока текста.ГЛАВА 5 1 . Blah blah blah blah blah. вид которой в браузере показан на рисунке 51. Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blab blah Blah blah blah blah blah Blah blah blah blah blah. Получившийся результат можно увидеть на рисунке 51. Первая строка текста выступает влево на 30 пикселов относительно стандартного левого края. Blah blah blah blah blah Blah blah blah blah blah Hah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah.5. Blah blah blah blah blah. Первая строка текста сдвинута влево. Управление отступами 267 Blah blah blah blah blah.3. </style> </head> . 50 пикселов. Чтобы создать обратный отступ. сначала задайте для левого поля текстового элемента какое-нибудь значение. Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. смещенного вправо на 50 пикселов. например.5 <head> <style type="text/css"> margin-left: 50рх. а затем задайте для атрибута text-indent отрицательное значение Определение Обратный отступ (hanging indent) представляет собой абзацный отступ наоборот. Рис.5.

.</p> <p>Blah blah blah. иначе она выйдет за левую границу страницы. не задавайте -80 пикселов в качестве значения отступа первой строки.268 Строим Web-сайты <body> <p>Blah blah blah...</p> </body> Совет Если величина левого поля равна «х». что для обратного отступа значение атрибута text-indent не больше.. если левое поле равно 50 пикселам. Другими словами. убедитесь. .. чем «-х»..

вид которой в браузере показан на рисунке 52. на рисунке 52.1.1.ГЛАВА 52. 52. В HTML имеются нумерованные (упорядоченные) и ненумерованные (маркированные) списки. Примеров обоих типов списков см.1 <table> <tr> <td> <!—Здесь начинается нумерованный список —> <li>First <li>Second <li>Third <li>Fourth <li>Fifth . Second item 3 Third item 4 Fourth item 5 Fifth item • • • • • loote delp i First item Second item Third item Fourth item Fifth item Puc. First item 2. File Edit Yiew Favorites 1. Создание списков В HTML существует два типа списков: нумерованные (упорядоченные) списки и ненумерованные (маркированные) списки. Далее следуют теги <li> для каждого элемента списка. Разметка списков одинакова за исключением тега списка Листинг 52. соответственно. Разметка списка начинается с тега <ol> или <ul> для нумерованного и ненумерованного списка.1. Исходный код страницы.

2

7

0

С

т

р

о

и

м

Web-сайты

<!—Здесь оканчивается нумерованный список —>
</td>
<td>
<!-Здесь начинается ненумерованный список ->

<li>First i
<li>Second i
<li>Third i
<li>Fourth i
<li>Fifth i

<!—Здесь оканчивается ненумерованный список —>
</td>
</tr>
</table>
Как можно заметить, HTML-код для списков полностью одинаков, за исключением тега списка. Следовательно, чтобы изменить нумерованный на ненумерованный список, достаточно поменять тег <ul> на тег <ol>.
Обратите также внимание, что в нумерованном списке не надо набирать номера
элементов. Браузер самостоятельно отслеживает нумерацию и отображает номера
элементов списка автоматически.
В отличие от элементов HTML, описанных в других главах данного раздела, для списков имеется ряд полезных атрибутов, управляющих внешним видом списков. Эти атрибуты обобщены в таблице 52.1.
В нумерованных списках, отличных от стандартных десятичных нумерованных списков, атрибут s t a r t указывает n-е значение в последовательности. Таким образом, алфавитный список со значением 4 для атрибута s t a r t начинается с буквы «D», поскольку «D» — четвертая буква алфавита. Подобным образом, список с римскими номерами начинается с «X», если значение атрибута s t a r t равно 10.

271

ГЛАВА 52. Создание списков
Табл. 52.1. Атрибуты списков в HTML
Атрибут

Тег, к которому применяется

Управляемый
элемент

Возможные значения

type

ol

Начальный
символ

А (заглавный буквенный), <ol type="A">
а (строчной буквенный),
<ol type="i">
I (заглавный римский
числовой),
i (строчный римский
числовой),
1 (десятичный)

type

ul

Форма
буллита
(маркера)

c i r c l e (пустой кружок),
d i s c (сплошной кружок), square (квадрат)

<ul type=
"circle">
<ul type=
"square">

Начальное
число или
первая буква
в списке

Любое числовое
значение

<ol
start="4">

start o l

Примеры

ВлоЖенные списки 6 HTML
Вложенные СПИСКИ — это СПИСКИ, которые находятся внутри других списков.
В HTML-разметке вложенный список занимает место элемента списка, как в следующем примере:
<li>First item of the main list</li>
<li>Second item of the main list</li>
<li>Third item of the main list</li>

<!

Здесь начинается вложенный список —>

<li>First item of the nested list</li>
<li>Second item of the nested list</li>
<li>Third item of the nested list</li>

<!—

Здесь окончился вложенный список —>
<li>Fourth item of the main list</li>

272

Строим Web-сайты

<li>Fifth item of the main list</li>
П р и необходимости можно вложить вложенный список в список, который находится
внутри другого списка:

<li>First item of the main list</li>
<li>Second item of the main list</li>
<li>Third item of the main list</li>
<!—

Здесь начинается вложенный список —>

<li>First item of the nested list</li>
<li>Second item of the nested list</li>
<!— Здесь начинается вложенный список, расположенный внутри другого вложенного списка —>

<li>First item of the very nested list</li>
<li>Second item of the very nested list</li>

<!— Здесь окончился вложенный список, расположенный внутри другого
вложенного списка —>
<li>Third item of the nested list</li>
<!—

Здесь окончился вложенный список —>

<li>Fourth item of the main list</li>
<li>Fifth item of the main list</li>

Определение
Вложенные СПИСКИ (nested lists) — это СПИСКИ, которые находятся
внутри других списков.

ГЛАВА 52. Создание списков

273

При вложении ненумерованных списков браузер обычно изменяет циклически тин
маркера для каждого последующего вложенного списка. Таким образом, если список
начинается с маркера в виде сплошного кружка (disc), во вложенном списке используется маркер в виде пустого кружка (circle), во вложенном списке второго уровня
используется маркер в виде квадрата (square), а во вложенном списке третьего уровня используется опять маркер в виде сплошного кружка (disc) и так далее. Пример
вложенных списков см. на рисунке 52.2.

First item of the mam list
Second item of the main list
Third item of the main list
о First item of the nested list
о Second item of the nested list
• First item of the very nested list
• Second item of the very nested list
о Third item of the nestedlist
Fourth item of the main list
Fifth item of the main list

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

Совет
Нумерованные СПИСКИ не подвергаются подобной обработке. Чтобы
создать эффект структуры с нумерованными списками, необходимо
в явном виде задать атрибуты шрифта для каждого вложенного
списка — или задействовать таблицу стилей. Подробности см. в
разделе «Инструментарий» в конце данной главы.

Настройка свойств списка с помощью
каскадных таблиц стилей
Каскадные таблицы стилей вводят несколько дополнительных возможностей форматирования списков, которые приводятся в таблице 52.?.

Замена маркеров изображением
Возможно, наиболее интересным из этих атрибутов является атрибут l i s t - s t y l e image, который позволяет задавать файл изображения вместо стандартного маркера
в виде сплошного кружка, пустого кружка или квадрата. Пример списка, где маркер заменен изображением, см. на рисунке 52.3.

Строим Web-сайты

274

изменение положения начального символа
Атрибутом l i s t - s t y l e - p o s i t i o n определяется, где будут отображаться маркеры
или начальные символы относительно элементов списка. При задании для этого атрибута значения o u t s i d e начальные символы отображаются вне основного блока
элементов списка, а при установке для атрибута l i s t - s t y l e - p o s i t i o n значения
i n s i d e начальные символы находятся внутри основного блока элементов списка
Примеры расположения начальных символов списка показаны на рисунке 52.4.
Табл. 52.2. Атрибуты списка в каскадных таблицах стилей
Атрибут

Возможные
значения

Управляемый
элемент

list-style- Изображение, отоб- u r l (путь изобраimage
ражаемое вместо
жения), попе
маркера или начального символа

Пример
ul {
list-style-image:
url(../images/bull e t , gif) ;
}

list-style- Позиция маркера
position
или начального
символа относительно элементов
списка

inside, outside

list-style- Тип отображаемого d i s c , c i r c l e ,
type
маркера или наdecimal,
чального символа
lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
none

Ete

Edt &w FjvontM

1«й

ol {
list-style-position: inside;
}
ol {
list-style-type:
lower-roman;
},

ййр

'•Firstfishitem
•Secondfishitem
• n u r dfishitem
•Fourthfishitem
•Fifthfishitem

Рис. 52.3. Используйте атрибут list-style-image
для замены
стандартных маркеров изображением из файла

ГЛАВА 52. Создание списков

275

Листинг 52.2. Исходный код страницы, вид которой в браузере
показан на рисунке 52.3
<head>
<style type="text/css">
ul {
list-style-image: url(images/fish.gif);

</style>
</head>
<body>
<li>First fish item</li>
<li>Second fish item</li>
<li>Third fish item</li>
<li>Fourth fish item</li>
<li>Fifth fish item</li>
</body>

h item. D e s e r t i o n of the item Description
of the item
' ^ F S e c o n d fish item. Description of the item.
Description of the item.
^ • T h i r d fish item Description of the uem
Description of the item.
*WFourth fish item Description of the item
Description of the item.
^e^Fifth fish item. Description of the item Description
of the item.

•First fish item. Description of the item. Description
of the item,
^ S e c o n d fish item. De3cnpticn of the item.
Description of the item.
П ж 4 fish item. Description of the item.
Description of the item.
Tourth fish item. Description of the item.
Description of the item.
^Fifth fish item. Description of the item Description
of the uem.

Рис. 52.4. Используйте атрибут
list-style-position
для задания положения маркеров или начальных символов
относительно элементов списка. Для списка слева значение
этого атрибута равно inside, а для списка справа -outside

Строим Web-сайты

276

Листинг 52.3. Исходный код страницы, вид которой в браузере
показан на рисунке 52.4
<style type="text/css">
./* Сначала изменим маркер всех тегов <ul> независимо от класса. */
ul {
list-style-image:

url(images/fish.gif);

/* Теперь определим классы для значений атрибута list-style-position. */
ul.in {
list-style-position:

,
inside,-

.

ul.out {
list-style-position: outside;

</style>

Совет
В исходном коде Web-страницы, показанной на рисунке 52.4, используется удобный прием с применением каскадных таблиц стилей.
Сначала правилом стиля для всех тегов <ul> заменяются маркеры
всех ненумерованных списков изображением рыбы. Далее следуют
стили класса для конкретных тегов, по одному для каждого значения
атрибута list-style-position.
Следующая таблица стилей производит тот же самый эффект:
ul.in {
list-style-image: url(images/fish.gif) ;
list-style-position:
inside;

ul.out {
list-style-image: url(images/fish.gif);
list-style-position: outside;
Преимущество кода таблицы стилей, приведенного в листинге 52.3,
состоит в том, что атрибут list-style-image
не повторяется два
раза. Вместо этого он приводится однажды, в глобальном переопределении тега. А два класса просто уточняют данный общий стиль.

ГЛАВА 52. Создание списков

277

Переопределение типа списка,
используемого браузером по умолчанию
Атрибут l i s t - s t y l e - t y p e удобен для переопределения HTML-тегов <ol> и <ul>,
чтобы не надо было хранить параметр отдельных типов атрибутов для каждого списка на Web-странице:
ul {
list-style-type:

square;

На Web-странице с данным правилом стиля автоматически все ненумерованные списки форматируются с маркерами в виде квадратиков.

Совет
Чтобы создать «голый» список без маркеров и начальных символов
значение
любого типа, задайте для атрибута list-style-type
попе в определении стиля, относящегося к этому списку.

Инструментарий

Создание для нумерованных списков стиля автоматической
структуры
При вложении нумерованных списков браузер не изменяет циклически типы списков для создания эффекта структуры, как в
случае ненумерованных списков.
Простая таблица стилей устраняет этот
недостаток
(см. рис. 52.5). Поместите данную таблицу стилей между тегами
< s t y l e > в разделе заголовка HTML-страницы или скопируйте
таблицу стилей точно в том виде, в котором она представлена,
во внешний CSS-файл.

Часто задаваемые вопросы
Сколько уровней
структуру?

может добавляться в

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

Строим Web-сайты

278

E.to E<* *"«

Favor*»

шшшшшяшшшшш

Iooh t №

I First level
A- Second level
В Second level
1 Third level
2. Third level
* Fourth level
Ь Fourth level
i Fifth level
о Fifth level
ш Fifth level
я Fifth !eve!
с Fourth level
d Fouth level
3. Third level
• a, Fourth levet
b Fourh level
4 Third level
С Second level
1 Third level
2 Third level
D. Second level
П Firrtlevel
A Second level
1 Third level
2. Third level
a. Fouth level
b Fouth level
Б. Second level
С Second level
D Second level
Ш. First level

Рис. 52.5. Данная та блица стиля структуры
служит для автомат
чического отображения
вложенных нумерованных с писков в формате структуры
/* Пронумеруем первый уров ень структуры с помощью заглавных римских числительн* IX ( I , I I , I I I , И Т . Д . ) . * /
ol {
list-style-type:
}

upper -гoman;

/ * Второй уровень стр^'ктуры является
вложенные
списком или тегом <ol>, расположенным где-нибу,::ь
внутри другого тега <ol> Эта задача решается с помощью контекстно-зависимогй селектора. */
ol ol {
/* Пронумеруем второй уровень структуры с помощью
заглавных букв (А, В, С, и т. д . ) . */
list-style-type: upper-alpha;
/* Третий уровень структуры является вложенным списком внутри вложенного списка или тега <ol>, расположенного где-нибудь внутри другого тега <ol>, который нг.ходится внутри еще одного тега <ol>. Необходим еще один контекстно-зависимый селектор. */

*/ list-style-type: lower-alpha. ) . и т. iii. ii. ' /* Пятый уровень структуры является вложенным списком внутри вложенного списка внутри вложенного списка внутри вложенного списка.279 ГЛАВА 52. воспользуйтесь каскадными таблицами стилей. д . */ list-style-type: decimal. или. д . ) . */ ol ol ol ol { /* Пронумеруем четвертый уровень структуры с помощью строчных букв (а. 3. ) . /* Четвертый уровень структуры является вложенным списком внутри вложенного списка внутри вложенного списка. */ list-style-type: lower-roman. Ь. Создание списков ol ol ol { /* Пронумеруем третий уровень структуры с помощью десятичных чисел (1. иными словами глубина структуры составляет четыре тега <ol>. или иными словами глубина структуры составляет пять тегов <ol>. . */ ol ol ol ol ol { /* Пронумеруем пятый уровень структуры с помощью строчных римских числительных (i. 2. и т. с. д . чтобы отрегулировать зазоры для элементов <И> и поля для тега <ol> с целью создания более привлекательного вида Web-страницы. Совет Если возникают проблемы. и т.

вы будете рады узнать."> Вы <strong>flonjffibi</strong> 'вить ваш текущий адрес электронной почты. Того же самого эффекта можно достичь с помощью атрибута c o l o r каскадных таблиц стилей: <h3 style="color=""#FF0000. цвет которого изменили."> Примечание</Щ> <р style="color="#FF0000. При изменении цвета текста. вложите теги <f ont> внутрь элемента: . то рискуете получить рассерженные электронные сообщения о том. Если вы еще и подчеркнете текст. как полужирный шрифт или курсив. Одним из основных идентификаторов гиперссылок является цвет. независимо от цвета текста.</р> предоставить ваш текущий адрес </font> Также как гарнитура тега <f ont> применяется ко всем текстовым элементам. окрашиваются в красный цвет (#FF0000). не являющегося гиперссылкой. В этой главе объясняется. настаивающих на использовании тега <font>. Если требуется изменить цвет текстовой строки внутри элемента. Прибегайте к изменению цвета текста как к последнему средству после того. Helvetica. Выделение текста с помощью цвета В главе 5 вы видели. как испробованы остальные возможности. s a n s . что это гиперссылка. вложенным внутри него. используемый по умолчанию. что свойство цвета для этого тега позволяет выполнить стоящую перед нами задачу: <font f a c e = " A r i a l . определенный процент посетителей вашего Web-сайта будет щелкать на этом тексте. используемого по умолчанию на этой Web-странице.</р> предоста- Совет Крайне осторожно изменяйте цвет текста там. выделенных тегами <h3 > и тегом абзаца. Если вы принадлежите к числу твердолобых Web-дизайнеров. отличный от цвета остального текста. не воздействуя на цвет текста. используемыми по умолчанию. что ваш Web-сайт не работает. так и цвет шрифта применяется к этим же элементам.ГЛАВА 53. как задавать цвет по умолчанию для текста Web-страницы вместе с цветом фона и цветами ссылок. В предыдущем примере оба элемента. другие методы шрифтового выделения. где это приходится делать. такие. как изменять цвет определенных текстовых элементов или фрагментов текста внутри элемента. полагая.s e r i f " color="#FF0000"> <h3 >Примечание</h3 > <р>Вы <strong>flc^>KHbi</strong> электронной почты.

1 <p>This paragraph is not highlighted.<span s t y l e = " c o l o r : #0000FF">CHHne</span>. Выделение текста с помощью цвета <р>Розы . This paragraph is highlighted. <span style="background-color: #FFFF00. вид которой в браузере показан на рисунке 53. This paragraph is highlighted. пользуясь каскадными таблицами стилей.ГЛАВА 53. This paragraph is highlighted This paragraph is highlighted. This paragraph is not highlighted. разместите теги <span> вокруг текста. This paragraph is highlighted This paragraph is highlighted This paragraph is highlighted This paragraph is highlighted.. this sentence is not highlighted This sentence is highlighted. Fte Edit Sev* Favorites Tools Help This paragraph is not highlighted This paragraph is not highlighted This paragraph is not highlighted . This sentence is not highlighted. </p> highlight- <p>In this paragraph. а фиалки Каскадные таблицы стилей также позволяют окрашивать область фона текстового элемента."> красные</зрап>.</p> <p style="background-color="#FFFFOO. This paragraph is highlighted. This paragraph is highlighted. .<font color="#FF0000">KpacHbie</font>.. Исходный код страницы. This paragraph is highlighted. пример которого показан на рисунке 53.. когда в текстовый элемент добавляется цвет фона? При задании для текстового элемента значения атрибута background-color в действительности окрашивается его блок или прямоугольная область. Обычно этот блок является прозрачным. This paragraph is highlighted. This paragraph is highlighted. .">This paragraph is ed. Puc. In this paragraph.1.<font Часто задаваемые вопросы ЧТО В действительности окрашивается.</p> 281 а фиалки . в которой находится текстовый элемент. color="#0000FF">CMHne</font>. This paragraph is highlighted. This paragraph is highlighted.</p> .">This sentence is highlighted. создавая эффект маркера. This paragraph is not highlighted This paragraph is not highlighted This paragraph is not highlighted. t h i s sentence is not highlighted. 53.1. С помощью каскадных таблиц стилей может создаваться эффект маркера для текста Листинг 53. </span> This sentence is not highlighted. .1. который хотите окрасить в другой цвет: \ <р> Розы . This paragraph is not highlighted This paragraph is not highlighted.<span s t y l e = " c o l o r : #FF0000. или. .

Когда изменяется цвет самого текста. и ничего не происходит. Поэтому люди будуг склонны полагать. добавьте в определение стиля следующую строку кода: font-weight: bold. именуемый highlight. самого текста. Правило создает класс. как выглядит печатная страница. поскольку этот текст не является гиперссылкой. что фоновы й цвет выполняет такую же функцию — привлекает внимание к важному фрагменту. что выделение должно быть желтым? Попробуйте использовать другие цвета: зеленовато-голубой (#OOFFFF). Чтобы выделить строку текста внутри элемента. Посетители щелкают и щелкают на цветном тексте. разметьте строку с помощью тегов <span> и задайте для атрибута c l a s s в теге <span> значение h i g h l i g h t : <р>3десь содержится текст. кроме проблем. При изменении цвета фона текстового элемента получаемый эффект выглядит на экране очень похоже. задайте для атрибута c l a s s в теге элемента значение h i g h l i g h t : <р class="highlight">3flecb содержится текст. когда кто-нибудь поработал над ней маркером. Чтобы выделить весь текстовый элемент. посетители вашего Web-сайта не будут полагать. серый (#СССССС) или бледно-зеленый (#99FF00). как правило. ярко розовый (#FF0099). чем изменение цвега. и сохраните во внешнем CSS-файле. Данный текст и гиперссылка лишь похожи по внешнему виду. Совет КТО говорит. Изменение цвета текста не влечет за собой ничего.</span> Здесь содержится текст</р> Поместите это правило между тегами <style> в разделе заго ловка своей Web-страницы или скопируйте правило как есть. . что такой текст является гиперссылкой. С добавлением данного кода текст внутри выделенной области приобретет полужирное начертание. Чтобы привлечь еще большее внимание к выделенному тексту. Большинство людей знает. Инструментарий Правило стиля для выделения желтым цветом Краткое правило стиля в этом инструментарии предоставляет желтое выделение для применения к любому тексту на Web-странице. <span c l a s s = " h i g h light">3flecb содержится выделенный текст. люди. Почему? Потому что в этом случае действует сила метафоры.282 Строим Web-сайты Изменение цвета фона таким путем обычно имеет больший смысл. Скорее всего. . связывают это с другой метафорой: гиперссылкой. поскольку вводит в заблуждение аудиторию вашего Web-узла.highlight { background-color: #FFFF00.

В первую очередь следует избавиться от эффекта теней. . Ее цель проста. неизящна и вызывающа. из-за которого большей частью горизонтальная линия выглядит нелепо: <hr noshade> У атрибута nosh^de отсутствуют значения. Однако если потратить некоторое время на настройку ее атрибутов. не прибегая к этой безобразной линии. У пользователя имеется возможность изменять большую часть этих атрибутов. что готовая линия слишком длинна. или его там нет. созданная средствами HTML. Большинство Web-дизайнеров предпочли бы разделить разделы на своих Web-страницах с помощью элегантного пустого пространства. Этот атрибут или присутствует в теге <hr>.1 приведены атрибуты HTML для тега <hr>. примеры которых приведены на рисунке 54. используемого по умолчанию.2. Наилучшее свойство этого элемента — это то. имеет несколько неэстетичный вид В таблице 54. Браузер генерирует ее самостоятельно.1. состоит в том. но наименее часто используемых элементов во всем HTML является скромная горизонтальная линия. 54. Одна из проблем. что уменьшает общее время загрузки графики и улучшает производительность Web-сайта. с помощью которого браузером генерируются горизонтальные линии. One Section of the Page Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Ы»Ь blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Another Section of the Page Blah blah blah blah blah blah blah blah blah blah blah blab blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 1 Ж К ILIKK | Ц И К |LINK | Ш К Рис. присущих горизонтальной линии. что линия является встроенной графикой. но почетна: создание визуальной разделяющей линии между разделами Web-страницы.1. Реабилитация горизонтальных линий ОДНИМ ИЗ наиболее полезных. чтобы сделать вид горизонтальных линий более привлекательным. Неизменяемая горизонтальная линия. Посетителям Web-сайта не надо загружать ее. как можно заметить на рисунке 54. можно создать ряд действительно классных эффектов.ГЛАВА 5 4 .

Задавая значение атрибута s i z e равным 1.2. Внеся небольшие изменения в атрибуты линии. в котором находится. вы не только стандартизуете вид элемента в браузерах.<hr width="33%"> центы <hr noshade> Любое числово е зна. например.Строим Web-сайты 284 One Section of the Page Blah blah blah biah blah blah blah biah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ^ blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah' >lah Another Section of the Page Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah slah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah iiOi | УШ | in3: i. Укороченные горизонтальные линии лучше подходят для большинства случаев. можно существенно улучшить ее вид Табл. уменьшите ее толщину.1. включая про.right. в ячейке таблицы или в разделе каскадных таблиц стилей div. что помогает создать более «воздушный» дизайн. По умолчанию она простирается на всю ширину страницы или ширину элемента контейнера. чтобы горизонтальная линия привлекала к себе слишком большое внимание. 54.<hr width="50"> селах по горизонтали чение. HTML-атрибуты для горизонтальных линий Атрибут Управляемый элемент Возможные значения Примеры align Горизонтальное положение элемента left.Нет значений го эффекта тени для горизонтальной линии size Толщина элемента в пикселах width Размер элемента в пик. 54.ii:n: | щ к Рис. Некоторые дизайнеры предпочитают задать точные значения в пикселах для ширины горизонтальной линии.<hr size="10"> чение Далее. Они вводят дополнительное пустое пространство в макет страницы. как. но и повышаете эффективность линии.Любое числово е зна. По умолчанию толщина линии в Internet Explorer составляет 2 пиксела и 3 пиксела в Netscape. вряд ли требуется. чтобы сделать вид горизонтальной линии более утонченным. Более тонкая линия лучше выглядит. подобно следующему примеру: . Таким образом: <hr noshade size="l"> К том)' же стандартная горизонтальная линия слишком длинна. center <hr a l i g n = " l e f t " > <hr a l i g n = " c e n t e r " > noshade Отключение объемно.

то при просмотре в Netscape с цветом линии ничего не происходит. но может смотреться слишком большой в неразвернутом полностью окне браузера. которые зависят от размера окна браузера. В Internet Explorer поддерживается атрибут color. тогда. f Совет Цвет горизонтальных линий можно изменять с помощью каскадных таблиц стилей. Таким образом. которую занимает горизонтальная линия.2. такой способ задания размера будет представлять наилучший вариант. при просмотре в Internet Explorer цвет линейки остается прежним. Возможным решением этой проблемы является задание обоих атрибутов в определении стиля: hr { color: #FFOOOO. и убирая атрибут noshade. и наоборот. если задать атрибут background-color в Netscape. задавая для высоты горизонтальной линии умеренное значение. которую она занимает. например. тогда как в Netscape применяется атрибут backgroundcolor. Однако если макет отличается плавающими размерами. /* для Netscape */ Совет Еще один классный эффект можно получить.ГЛАВА 54. поскольку данный элемент автоматически простирается на всю ширину. Можете оставить ее центрирование. Чтобы устранить эту проблему. показанных на рисунке 54. В результате получается пустой прямоугольник. Если работа ведется с макетом фиксированной ширины. вероятно. По умолчанию браузер центрирует горизонтальные линии — это незаметно. горизонтальная линия фиксированной ширины может не подойти. Центрирование становится заметным при укорачивании ширины линии. указав ее ширину в процентах: <hr noshade s i z e = " l " width="20%"> При значении в 20% ширина линии масштабируется до 20% ширины области. Она будет выглядеть нормально в развернутом окне браузера. /* для Internet Explorer */ background-color: #FFOOOO. то ее ширина будет равна 120 пикселам или 20% от 600. Реабилитация горизонтальных линий 285 <hr noshade s i z e = " l " width="200"> Точная величина зависит от ширины области. задайте плавающие размеры и для горизонтальной линии. если горизонтальная линия находится в ячейке таблицы шириной 600 пикселов. но браузеры для этого используют разные атрибуты каскадных таблиц стилей. 4 или 5 пикселов. Если задать атрибут color в Internet Explorer. но многие дизайнеры предпочитают располагать линию слева или справа: <hr noshade size="l" width="20%" align="left"> Точно такие атрибуты заданы для горизонтальных линий. .

Определение Знак конца (end sign)) — это маркер ИЛИ типографский знак.Строим Web-сайты 286 Создание знаков конца Здесь описывается еще один трюк. .3 пустой квадрат выглядит как флажок из-за объемного эффекта тени. что грядет Армагеддон. вероятно. Совет Сплошные прямоугольники. лучше использовать в качестве знаков конца окрашенные сплошным цветом квадратики. Пример такого знака см. что на рисунке 54. тогда как пустые прямоугольники отображаются с обычными углами. получаемые из горизонтальной линии. задайте одинаковые значения для атрибутов width и s i z e горизонтальной линии: <hr size="10" width="10"> Укажите атрибут noshade для получения сплошного квадрата или оставьте атрибут noshade. можно создать прямоугольник в конце разде ла текста подобно знаку конца во многих журналах или специальному знаку или маркеру в конце статьи. Он также служит пророче • ством о том. (Отступы в абзацах получены с помощью атрибута margin-left каскадных таблиц стилей. выглядят в Netscape с закругленными углами.3.3. По этой причине. 54. так что не забывайте об этом. One Section of the Page Blah bUh blah blah blah Hah blah blah blah blah blah blah blah blah olah blah blah blah blah Hah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah bUh blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blab blah Hah blah blah blah blah I .) Чтобы создать квадрат. Обратите внимание.lah blah blah blah blah blah blah blah Another Section of the Page Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Hah blah blah blah blab blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blab blah blah blah blah blah Hah blah blah blah blah blah Hah Hah blah Hah blah blah blah Hah kttffi IШКI ffiS I L 4 3 I I И Puc. на рисунке 54. в котором используются горизонтальные линии манипулируя атрибутами width и size. чтобы получить незакрашенный квадрат. который отображается в конце рассказа или статьи. Учитывайте это. Создайте сплошной или пустой прямоугольник с помощью горизонтальных линий.

месяца. */ . */ var now = new Date () . Вы можете самостоятельно вставлять строку даты и метку времени с помощью ряда простых функций JavaScript. календарной даты и года. Инструментарий Генерирование строки даты Данная функция JavaScript состоит из двух частей. Полные сведения об этом приводятся в разделе «Инструментарий». Внутри тела Web-страницы. Даже если вы обновляете содержимое Web-сайта от случая к случаю.ГЛАВА 55. сообщающий текущее время и чаще всего отображаемый внизу страницы. сообщающий текущую дату и обычно отображаемый вверху страницы. Основной сценарий вставляется между тегами < s c r i p t > в разделе заголовка HTML-файла или в отдельном JS-файле. Метка времени (timestamp) — фрагмент текста. как посещение часто обновляемого. со свежими данными Web-сайта. метка времени — это фрагмент текста. Ничто так не радует посетителей. Точно также. Определение Строка даты (dateline) — фрагмент текста. вид текущей даты и текущего времени помогает создать постоянное ощущение новизны. Все эти значения являются числовыми. сообщающий текущую дату. сообщающий текущее время. С помощью этой строки кода извлекается текущая дата и помещается в переменную now. где требуется вставить строку даты. там. в котором дата и время отображаются на компьютере посетителя. Добавление строки даты и метки Времени Строка даты — это фрагмент текста. Совет Браузер воспроизводит строку даты в виде местного времени посетителя или в том формате. /* Следующие строки кода предназначены для извлечения из переменной now дня недели. необходим дополнительный тег < s c r i p t > . Оба элемента удобны для придания ощущения частого обновления Web-страницы. Это достигается с помощью объекта Date языка JavaScript. function doDateline() { /* Вначале извлечем текущую дату.

} if (day == 2) { dateline = "Tuesday. со значениями от 0 до 6. " . */ var dateline = "". название месяца. if (day == 1) { dateline = "Monday.• if (day == 0) { dateline = "Sunday. . Обратите внимание на запятую и конечный пробел после названия дня недели. представляющими дни Sunday (воскресенье) до Saturday (субботы). как 12/22/2005. Эта переменная будет содержать в конечном итоге текст строки даты.getDate(). такую. тогда как Netscape и Opera уменьшают год ровно на 1900 лет. что::н следующий элемент. */ if (year <2000) { year += 1900. /* Инициализируем переменную dateline. опустите этот блок кода. Если требуется сформировать простую строку дать:. ". var month = now.getYear(). "'. var year = now.getMonth(). var date = now. /* Web-браузер Internet Explorer возвращает правильный год.getDay().Строим Web-сайты 288 var day = now. отделялся от запятой. День недели в настоящее время существует в числовой форме. Следующие блоки кода if/then добавляют корректное название дня в переменную dateline на основе числового значения переменной day. Пробел необходим. Следующий блок кода с операторами if/then позволяет добиться вывода правильного года во всех браузерах. if (day == 3) { dateline = "Wednesday. /* Теперь сформируем текст строки даты.

V if (month = = 0 ) { dateline = "January ". ". необходимый для надлежащего . if (day == 5) { dateline = "Friday. где О соответствует January (январь). if (month = = 4 ) { dateline = "May ". . if (month == 2) { dateline = "March ". поменяйте местами этот блок кода с 'последующим блоком кода. ". } if (day = = 6 ) { dateline = "Saturday. Если требуется получить простую строку даты. if (month == 1) { dateline = "February ".форматирования. if (month = = 3 ) { dateline = "April " . Если необходимо использовать европейский стиль для строки даты. Эти блоки кода if/then добавляют правильное название месяца в переменную dateline. Добавление строки даты и метки времени 289 if (day = = 4) { dateline = "Thursday. замените этот блок кода следующей строкой: dateline += (month + 1) + "/". 2 — March (март) и так далее до числа 11 соответствующего December (декабрь).ГЛАВА 55. Обратите внимание на конечный пробел. /* Месяц также существует в числовой форме. 1 — February (февраль) .

290 Строим Web-сайты if (month = = 5 ) { dateline = "June ". if (month == 11) { dateline = "December ". а также добавляет запятую с пробелом. Ч dateline += date + ". /* -С помощью следующей строки кода добавляется год в числовой форме в переменную dateline. . ". удалите запятую и пробел. */ dateline += year. if (month == 6) { dateline = "July " if (month == dateline = •7 ) { August if (month == 8) { dateline = "September if (month dateline if (month dateline 9) { "October 10) { "November ". замените эту строку кода следующей строкой: dateline += date + "/". этот блок кода с предыдущим. Если требуется получить простую строку даты. Для получения даты в европейском формате поменяй :ч. /* Следующая строка кода добавляет числовую дату в переменную dateline. а также добавьте запятую после имени каждого месяца в предыдущем блоке кода.

заголовок или текстовый элемент любого другого типа: <pxscript language="JavaScript">doDateline() . добавьте следующий код: <script </script> language="JavaScript">doDateline(). Добавление строки даты и метки времени 291 /* Переменная dateline готова для отображения.1. 55. похожий на тот.2. </scriptx/p> Поместите основной сценарий вместе с вызовом doDateline и вы получите вид строки даты.1.ГЛАВА 55. Теперь в том месте. */ document. Строку даты можно добавить на любую Web-страницу Рис. Эта строка кода предназначена для записи dateline на Web-странице. Этим завершается основной сценарий. 55-. Если предпочитаете. можно создать простую строку даты 10" . В зависимости от ваших предпочтений можно разметить данный тег <script> как абзац. где должна отображаться строка даты. что показана на рисунке 55. Простая версия строки даты показана на рисунке 55.write(dateline). Рис.2.

чем 12.." с предшествующим пробелом для надлежащего форматирования.Строим Web-сайты 292 Инструментарий Генерирование метки времени Данная функция JavaScript во многом сходна с предыдущей фл акцией. как 16:12:25 вместо 4:12:25 P. начнем с получения текущей даты и поместим ее в переменную с названием now. Если больше.getMinutes(). Далее приводится код основной части сценария: function doTimestamp() { /* Как и в предыдущем сценарии. минуты (minutes) и секунды (seconds). удалите данную строку кода. var minutes= now.M. */ var hour = now.". • /* Извлечем теперь из переменной now часы (hour). var seconds = now.. Совет Как и в случае строки даты.M. Дополнительный тег <script> внутри тела Web-страницы служит для отображения метки времени. то из значения вычитается 12 и время изменяется на P. */ var now = new Date () . /* Инициализируем переменную timestamp. /* Зададим для. /* По умолчанию переменная hours в JavaScript использует 24-часовой формат. Основной сценарий располагается между тегами <script> в разделе заголовка HTML-файла или во внешнем файле JavaScript. опять с предшествующем пробелом для надлежащего 'форматирования. С помощью следующего блока кода проверяется.getHours() .getSeconds(). данный сценарий метки времени генерирует время согласно внутренним часам в компьютере посетителя.M. Если требуется отображать метку времени в 24-часовом формате. */ var time =" A. отображаемая браузером. */ var timestamp = "".M. в которой будет храниться строка текста. . больше ли переменная hour.переменной time значение " A.

} /* Подобным образом последующие блоки кода if/then форматируют минуты и секунды так. */ if (hour > 12) { hour -= 12. */ document. Данный блок кода if/then добавляет ноль слева от часов там.".ГЛАВА 55. */ timestamp = hour + " : " + minutes + " : " + seconds + t ime.write(timestamp). </script> Возможно. Добавление строки даты и метки времени 293 Если необходимо отображать время в 24-часовом формате . Добавим следующий код в том месте. */ if (minutes < 10) { minutes = "0" + minutes. где необходимо. а не как "6".M. чтобы они отображались с нулями слева. /* Теперь сформируем строку метки времени. замените этот блок кода следующим кодом: if (hour < 10) { hour = "0" + hour. чтобы шестой час отображался как "Об". вы пожелаете сдобрить метку времени дополнительным форматированием: <em>This page generated at . где это надо. /* Запишем метку времени на страницу. где требуется отображать на Web-странице метку времени: <script language="JavaScript">doTimestamp() . time = " P. if (seconds < 10) { seconds = "0" + seconds.

3.294 Строим Web-сайты <script language="JavaScript">doTimestamp{) . </scriptx/em> Результат дополнительного форматирования показан на рисунке 55.М. Добавление мешки времени . 55. Thispage generated at 9:18:57 А. Рис.3.

В таблице 56. . которые содержат строки и столбцы данных. Заголовок раздела таблицы tfoot Нижний раздел таблицы tbody Основной раздел таблицы. В консорциуме W3C не любят.ГЛАВА 56. для создания макета страницы. Табл. помните о них. они вам не известны. которые стоят обсуждения. а не макет страницы.1 показана таблица данных. например. Многие из этих тегов не имеют смысла в контексте макетных таблиц.1 показаны стандартные HTML-теги таблицы. 56. Что касается мнения членов консорциума W3C. может приводиться несколько раз в таблице для обозначения разных разделов в теле таблицы tr Строка в таблице th Ячейка таблицы. в которой используются все десять тегов из •таблицы 56. в которой содержатся строки и столбцы данных. Стандартные HTML-теги таблицы в порядке их появления в коде Тег Значение table Таблица caption Заголовок таблицы col Столбец в таблице colgroup Группа связанных столбцов в таблице thead . Определение Таблица данных (data table) — HTML-таблица. Разработка таблиц данных Таблицы данных — это элементы таблиц. когда заимствуют теги <table> для «неправедных» целей. которая содержит обычный элемент данных На рисунке 56.1. которая содержит заголовок строки или столбца td Ячейка таблицы. поскольку спецификация HTML определяет теги <table> именно для этих целей.1. поэтому. то таблицы данных являются единственным типом таблиц. Но когда вы создаете таблицу данных. поскольку надлежащая разметка улучшает доступность результатов вашего труда для других пользователей. возможно.

'за которой следует группа из шести столбцов. вид которой в браузере показан на рисунке 56. File yew Favwrtes Edit Iods yefe Table 1 M utageruc Effects of the Kenneth Frequency on HTML Т. Исходный код страницы. Обратите внимание. В этой таблице данных используются все десять тегов из таблицы 56. Mutagenic Effects of the Kenneth Frequency on HTML Table Cells </caption> <!— Далее идет описание структуры столбца таблицы. Теги <col> и <colgroup> в этой конкретной таблице показывают структуру одного столбца слева.1 Листинг 56. —> <col> <colgroup span="6"x/colgroup> <!— Далее идет головная часть таблицы.eWOPFFF WFFOOFF * M F F 0 ' i x= i 1 d 5 25 jleft J21 left 3 2 (is 17 .1.1.26~ [525" J6S [209 [center [center inght right [bottom Ibottom ibottom bc'ttom . как работает HTML-разметка. чтобы разобраться.296 Строим Web-сайты Просмотрите исходный код для показанной Web-страницы. что для тега <col> отсутствует его закрывающая версия. Для ячеек таблицы используются теги <th> . 56.з Ые Cells x= 1 | width heiglit 18 valign [top 4 :67 1108 1202 ". в которой описывается верхняя строка таблицы данных.bottoi bgcolor SoOOOFF.1 •stable border="l"> <!— Первая часть содержимого представляет собой заголовок таблиць — <caption> ' Table 1. тогда как для тега <colgroup> закрывающий тег есть.•ilisii : 1 2 3 4 JKCTOю 5 косCFF Г 6 Рис.

как строка итогов. Она должна располагаться до любого из основных разделов таблицы. —> <tfoot> <tr> <th>x =</th> <th>l</th> <th>2</th> ' <th>3</th> <th>4</th> <th>5</th> <th>6</th> </tr> </tfoot> <!— Далее идет тело таблицы. —> <thead> <tr> <th>x =</th> <th>l</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> </tr> </thead> <!— Далее идет нижняя часть таблицы. Нижний раздел часто полностью совпадает с головной частью.ГЛАВА 56. Разработка таблиц данных 297 вместо тегов <td>. . такое. что они являются ячейками головной части таблицы. Первая из них начинается здесь. но в нижней части может иметься уникальное содержимое. чтобы показать. в которой описывается последняя строка таблицы данных. как в этом примере. Содержимое этой конкретной таблицы разбито на три разные основные части.

<td>19</td> <td>25</td> <td>67</td> <td>108</td> <td>202</td> </tr> <tr> <th>height</th> <td>18</td> <td>21</td> <td>26</td> <td>68</td> <td>209</td> <td>525</td> </tr> </tbody> <!— Здесь размечается второй основной раздел. • . <td>left</td> <td>left</td> <td>center</td> <td>center</td> <td>right</td> <td>right</td> </tr> <tr> . —> <tbody> .298 Строим Web-сайты <tbody> <tr> <th>width</th> <td>17</td> . • <tr> <th>align</th> .

Зачем надо в первую очередь кодировать в таблице эти сведения? . что хорошего в HTML-тегах группировки: <col>. вы удивляетесь. а теги <thead>.ГЛАВА 56. <tf oot> и <tbody> размечают разделы таблицы. <colgroup>. эти теги не добавляют никакого содержимого в таблицу. <thead>. Разработка таблиц данных 299 <th>valign</th> <td>top</td> <td>bottom</td> <td>bottom</td> <td>bottom</td> <td>bottom</td> <td>bottom</td> </tr> </tbody> <!— Здесь размечается третий основной раздел. —> </table> использование большинства тегов группировки Возможно. чтобы завершить разметку. Теги <col> и <colgroup> просто описывают структуру столбцов в таблице. —> <tbody> <tr> <th>bgcolor</th> <td>#0000FF</td> <td>#00FFFF</td> <td>#FF00FF</td> <td>#O0FFO0</td> <td>#0000FF</td> <td>#00CCFF</td> </tr> </tbody> <!—Добавим закрывающий тег таблицы. Все таки. <tf oot> и <tbody>.

Просто укажите атрибут align один раз в теге <col>: <col align="right"> Лучше задавать выравнивание в виде определения CSS-стиля: <col s t y l e = " t e x t .300 Строим Web-сайты Совет При использовании тегов <col> и <colgroup> с тегами <thead>.s t y l e : i t a l i c . связанных со странными разрывами. "x/col. s i z e : lOpx. что вы хотите выровнять вправо содержимое каждой ячейки таблицы в первом столбце.a l i g n : r i g h t . поскольку именно для них предназначались с о span и rowspan разработчиками HTML. tfoot и tbody. font- <!— Содержимое располагается здесь —> </thead> Работа с атрибутами colspan и row/span Атрибуты c o l span и rowspan представляют беду для макетных таблиц. показанную на рисунке 56. которая из них больше подходит для конкретной таблицы данных. <tfoot>n <tbody> в одной и той же таблице браузер Netscape работает неустойчиво и не всегда применяет атрибуты col и colgrou. Тем не менее. Возьмите в качестве примера таблицу. " > sans s e r i f . f o n t ."> Эта сокращенная запись работает также и с тегом <colgroup>: <colgroup span="6" s t y l e = " t e x t . width: lOOpx.:: Простой способ решения этой проблемы состоит в отказе от использования col и colgroup вместе с thead.a l i g n : right. Выберите одну группу тегов или другую — в зависимости от того. Нет необходимости писать строку кода: <td align="right"> в каждой ячейке таблицы. Предположим.1.a l i g n : center. . Теги группировки не только улучшают доступность таблицы.a l i g n : center. width: 75px.-"></colgroup> Добавьте атрибут width. они предоставляют ряд удобных способов форматирования. group> HTML-атрибуты и определения CSS-стилей можно также применить к разделам thead. эти атрибуты удобно использовать для таблиц данных. чтобы задать размер столбцов по горизонтали: <col s t y l e = " t e x t ."> <colgroup span="6" s t y l e = " t e x t . tfoot и tbody: <htead style="font-family: Arial. Helvetica. описывая подробно ее структуру. поскольку являются источником всевозможных проблем.

"></colgroup> style="width: 150px. 56. Используем их для заполнения пустых ячеек таблицы. тогда как атрибут rowspan определяет число охватываемых строк. Color Transformations in Table Borders after Exposure to the Kenneth Frequency . .301 ГЛАВА 56. вид которой в браузере показан на рисунке 56. Color Transformations in Table Borders after Exposure to the Kenneth Frequency</caption> <colgroup span= "2" style="width: lOOpx. показанный на рисунке 56. Border Color ! i phase 1 i ! Phftie 2 i i X Before After 1 #11111 ifniO #000066 2 #000033 J #000066 4 #000099 5 #FFFFFF t #FFFF33 j 7 #FFFKf i * X i #FFFF33 . File Edit View Favorites loots SJalp Table 2. тогда как атрибут rowspan определяет количество охваченных строк.2. Лучший способ понять.| #CC6699 #3333FF #000000 #000000 #000000 #FJFF99 #663399 Before After Puc. как работают атрибуты colspan и rowspan — рассмотреть пример. text-align: <!— Здесь головной элемент состоит из двух строк таблицы. Исходный код страницы. охватываемых ячейкой таблицы. Для разметки этой таблицы применяются атрибуты col span и rowspan Листинг 56.). Разработка таблиц данных С технической точки зрения атрибут col span определяет. Определение Атрибут colspan определяет количество столбцов. Несколько ячеек содержат неразрывные пробелы (&nbsp.2 <table border="l"> <caption>Table 2.2. сколько столбцов занимает или охватывает конкретная ячейка таблицы."></colgroup> <colgroup span=""2" center.2.

В первой ячейке первой строки таблицы содержится атрибут rowspan. вы увидите. <thead> <tr> <th>&nbsp.</th> <th colspan="2">Border Color</th> </tr> <tr> <th>&nbsp.</th> <th>x</th> <th>Before</th> <th>After</th> </tr> </tfoot> <!— В этой таблице имеются две основные части. заключенные в теги <tbody>. 3 и 4.2.302 Строим Web-сайты Последняя ячейка в первой строке содержит атрибут colspan. Посмотрев на рисунок. что ячейка "Phase 1" охватывает строки 1.</th> <th>x</th> <th>Before</th> <th>After</th> </tr> </thead> <tfoot> <tr> <th>&nbsp. ячейка "Border Color" охватывает два столбца: столбец "Before" и столбец "After". Как можно видеть на рисунке 56. 2.</th> <th>&nbsp. -> <tbody> .

Разработка таблиц данных 303 <tr> <th rowspan="4">Phase <th>l</th> <td>#0OOOOO</td> <td>#000066</td> </tr> <tr> <th>2</th> <td>#000033</td> <td>#FFFF33</td> </tr> <tr> . —> <tbody> <tr> <th rowspan="4">Phase 2</th> <th>5</th> <td>#FFFFFF</td> <td>#OOOOOO</td> </tr> <tr> .ГЛАВА 56. <!— Здесь размечается вторая основная часть. заключенная в теги <tbody>. Опять атрибут rowspan в ячейке "Phase 2" обуславливает охват этой ячейкой четырех строк. </tbody> . <th>3</th> <td>#000066</td> <td>#CC6699</td> </tr> <tr> <th>4</th> <td>#000099</td> <td>#3333FF</td> </tr> .

Значения этих атрибутов определяют число охватываемых столбцов или строк.</th> . Вы заметите. по-видимому. которая охватывает несколько столбцов или строк. атрибуты colspan и rowspah находятся в теге ячейки таблицы <th> или <td> в зависимости от того. что в коде строки. включающей ячейку. пропущена часть разметки. в коде первой строки данных таблицы.</th> <th>&nbsp.2. показанной на рисунке 56. Совет Одиночная ячейка таблицы может содержать оба атрибута c o l span и rowspan. Например. вы обнаружите три ячейки таблицы: <tr> <th>&nbsp. является охватывающей ячейкой ячейка головной части таблицы или обычная ячейка.Строим Web-сайты 304 <th>6</th> <td>#FFFF33</td> <td>#OOOOOO</td> </tr> <tr> <th>7</th> <td>#FFFF66</td> <td>#OOOOOO</td> </tr> <tr> <th>8</th> <td>#FFFF99</td> <td>#663399</td> </tr> </tbody> </table> Как можно видеть из листинга 56.2.

возникающую из-за небольших значений атрибутов eel lpadding и cellspacing. для которой установлены именно эти значения атрибутов. Разработка таблиц данных 305 <th colspan="2">Border Color</th> </tr> В следующей строке имеется четыре ячейки таблицы: <tr> <th>&nbsp. действительно. Теги <colgroup> описывают четыре столбца.ГЛАВА 56. в этом разделе таблицы содержится четыре столбца. самая первая строка таблицы состоит из трех ячеек. а не три. атрибуты c e l l p a d d i n g и c e l l s p a c i n g служат полезными инструментами форматирования. Здесь опять ячейку с атрибутом colspan. равным 2. В действительности именно так и должно быть. показанной на рисунке 56.2.</th> <th>x</th> <th>Before</th> <th>After</th> </tr> Отсутствующий код в первой строке — это вполне нормально. Еще одно замечание: теги <colgroup> вверху кода таблицы имеют следующую структуру: <colgroup span="2"x/colgroup> <colgroup span="2"x/colgroup> Диапазоны тегов <colgroup> в сумме дают четыре столбца. как видно на рисунке. а не одну. в этом случае в обеих строках содержится по четыре ячейки таблицы. Выбор значений атрибутов cellpadding и cellspacing Обычно при создании макетной таблицы в теге <table> для атрибутов c e l l padding и c e l l s p a c i n g задаются значения равные 0. чтобы увидеть разницу во внешнем виде.3 показана таблица. Атрибут c e l l p a d d i n g определяет величину внутреннего пустого пространства между границами ячейки таблицы и ее содержимым. необходимо считать как две ячейки. Таким образом. и. Однако когда создается таблица данных. все совпадает. тогда как атрибут c e l l s p a c i n g определяет величину внешнего зазора между отдельными ячейками таблицы. При задании в теге <table> атрибутов cellpadding и c e l l s p a c i n g их значения применяются ко всем ячейкам в таблице: <table border="l" cellpadding="5" cellspacing="8"> На рисунке 56. Сравните ее с таблицей. . Ячейка таблицы с атрибутом col span считается за 2 ячейки. хотя.

попробуйте несколько изменить значения атрибутов cellpadding и c e l l s p a c i n g в ту или другую сторону. Определение Значением атрибута cellpadding определяется величина внутреннего пустого пространства между границами ячейки таблицы и ее содержимым. 56. В этой таблице данных отрегулированы зазоры внутри и вне ячеек с помощью атрибутов cellpadding и cellspacing Используйте атрибуты cellpadding и c e l l s p a c i n g .306 Строим Web-сайты £fe £(Й View Fjvorites Iools Help Table 2 Color Transformations in Table Borders after Exposure to tii-i: nneth Frequency Bci'drr Co 01 X Before After 1 #000000 #000066 2 #000033 #FFFF33 3 #000066 #CC6699 л #000099 #3333FF 5 #FFFFFF #000000 6 #FFFF33 #000000 7 #FFFF66 #000000 8 #FFFF99 #663399 X Brfor. как и его нехватка. пока значение атрибута c e l l s p a c i n g равно 0. чтобы добавить немного пустого пространства в таблицу.3. After Phase 1 Phase 2 Г f " i1 Рис. плотно заполненную данными. атрибут c e l l padding будет лучшим выбором для регулировки зазоров. возможно. Слишком много пустого пространства также плохо. на рисунке 56. когда в них есть немного дополнительного свободного пространства. нарушая непрерывное поле фонового цвета. Как видно из рисунка 56. например. как. атрибут cellpadding не оказывает такого эффекта до тех пор. Таблицы обычно легче воспринимаются. Однако здесь важно не перестараться.5. Если в таблице данных используются фоновые цвета. . В таких ситуациях следует руководствоваться зрительным восприятием. Атрибут c e l l s p a c i n g часто является причиной видимых зазоров между ячейками.4. Если таблица не достаточно удобна для чтения. Значением атрибута cellspacing определяется величина зазора между отдельными ячейками таблицы.

Осторожно подходите к изменению значения атрибута cellspacing. padding-left: 2px.5."> Не Е* tfew Fflycrtes i lools ЦеЬ Table 2. Чтобы сохранить цветной фон таблицы сплошным. padding-right: 5px.4. 56. Color Transformations in Table Borders after Exposure to the Kenneth Frequency Border Color After Before X #CC6699 #000099 #3333SF 5 #FFFFFF #000000 6 #FFFF33 #000000 7 #FFFF66 #000000 8 #FFFF99 #663399 X Before After Puc. а значение атрибута cellspacing установите равным О . Разработка таблиц данных 307 Совет Установите необходимое значение набивки для отдельной ячейки таблицы с помощью CSS-атрибутов padding-top.ГЛАВА 56. 56. padding-left и padding-right подобно следующему примеру: <td style="padding-top: Зрх. При задании значения атрибута cellspacing часто происходит разрыв сплошного цветного фона в таблице gte bit щв« Favorfces Tpcb v: tielp Table 2 Color Tranjformations in Table Borders after Exposure to the Kenneth Frequency Border Color X Before 1 Ami Phaie2 After #00006« 2 #000033 «FFFF33 3 #000066 #CC6699 4 #000099 #3333FF 5 #FFFFFF #000000 6 #FFFF33 #000000 7 #FFFF6« #000000 8 #FFFF99 #663399 X Before After i Puc. когда в ячейках таблицы используется цветной фон. пользуйтесь атрибутом cellpadding. padding-bottom. padding-bottom: 4px.

Для этой таблицы задана черная (#000000) граница размером в 5 пикселов . однако все пользуются границами в таблицах данных. Внешняя граница таблицы отображается с толщиной 5 пикселов. сохраняют свое нормальное значение толщины. как в следующем примере: <table border="5" bordercolor="#000000" rules="cols"> При установке атрибута r u l e s равным c o l s браузером прорисовываются линейки только вокруг столбцов. 56.Строим Web-сайты 308 изменение границы Вряд ли кто-нибудь использует границы в макетных таблицах. или так называемые линейки. но заимствуют цвет границы таблицы. но окрашиваются в цвет внешней границы таблицы. Табличный атрибут border управляет толщиной границы. как. Внутренние границы. В таблице 56.2 приведены возможные значения атрибута r u l e s . Определение Линейки (rules) — это внутренние границы таблицы.6. Способ рисования браузером линеек в таблице можно изменить посредством задания атрибута rules. например. Table 2. а атрибут bordercolor определяет ее цвет: <table border="5" bordercolor="#000000"> На рисунке 56. Они сохраняют свою нормальную толщину независимо от значения атрибута border.7. на рисунке 56.6 показана таблица с приведенными выше свойствами. Color Transformations in Table Borders after Exposure to the Kenneth Frequency Border Color Befoi #000033 #FFFF33 #3333FF Phase 2 #FFFF33 #000000 #000000 #FFFF99 Befoi Puc.

как выглядит в браузере стиль точечной (dotted) границы.8 показано. Разработка таблиц данных 309 Совет Границы таблицы отображаются в Netscape с объемным эффектом теней.7. Другие стили границы см. линейки отсутствуют С помощью каскадных таблиц стилей можно изменить стиль границы: <table border="5" bordercolor="#000000" der-style: dotted. . Задайте атрибут rules в теге <table>. colgroup. Table 2. В браузере Internet Explorer границы таблицы отображаются сплошными. Здесь значение атрибута rules равно cols Табл.2. Значения атрибута r u l e s Значение Линейки рисуются вокруг all Всех ячеек таблицы cols Только столбцов rows Только строк groups Только групп: col. как будут воспроизводиться линейки браузером. чтобы определить.3.ГЛАВА 56. thead. t f oot и tbody none Ничего. 56. 56."> rules="groups" style="bor- На рисунке 56. Color Transformations in Table Borders after Exposure to the Kenneth Frequency Border Color X Phase 1 Phase 2 1 2 3 4 5 6 7 S X Before #000000 #000033 #000066 #000099 #FFFFFF #FFFF33 #FFFF66 #FFFF99 Before - After #000066 #EFFF33 #CC6699 #3333FF #000000 #000000 #000000 #663399 After Puc. в таблице 56.

8. В таблице 56.3. Для изменения стиля границы используйте каскадные таблицы стилей Табл. которые можно взять на вооружение. Для границ разных сторон таблицы можно задать разные значения.s t y l e : dashed. но не все браузеры поддерживают их.310 Строим Web-сайты Ё*е Edft yew Favorites Iods jjefp Table 2 Color Transformations да Table Borders after Exposure to the Kenneth Frequency Border Color Phase: Before After #000000 #000033 #000066 #000095 #000066 #FFFF33 #CC6699 #3333EF #FFFFFF #FFFF33 #FFFF66 #FFFF99 #000000 #000000 #000000 #663399 Before After Рис.r i g h t . сплошная грани ца dashed Штриховые линии dotted Точечные линии double Пара сплошных границ none Отсутствие границ В каскадных таблицах стилей определяется множество других стилей границ. задаваемые с помощью каскадных таблиц стилей Стиль Вид solid Непрерывная. border-bottom-style: d o t t e d . Стандартные стили границ. 56. .4 приводится список стандартных CSS-атрибутов границы. как на рисунке 56. b o r d e r .l e f t s t y l e : double. b o r d e r .s t y l e : none."> В действительности с помощью каскадных таблиц стилей можно установить толщина и цвет границы независимо для всех четырех сторон. 56.t o p .9: •stable border="5" bordercolor="#000000" rules="groups" s t y l e = " b o r d e r .

рон границы border-style Стиль всех четырех сто. border-bottom-color Цвет нижней границы border-bottom-color: #00FF00. Стандартные CSS-атрибуты границы Атрибут Управляемый элемент border-color Цвет всех четырех сто. нижней и левой границ можно задать разные стили Табл. 4px. border-top-width.9. Разработка таблиц данных Tible 2 Color Transformation. border-left-style Стиль левой границы border-left-style: solid.border-color: #FF0000. border-top-style Стиль верхней границы border-top-style: border-top-width Вес или толщина верхней границы dashed. border-left-width Вес или толщина левой границы border-left-width: 5px. тырех сторон границы Пример dotted. 6px. С помощью каскадных таблиц стилей для верхней. n Table Borders after Expo re to the Kenneth Frequency Bordr г Color Phaiel Phase 2 X Brfor. border-right-color Цвет правой границы border-right-color: #FFFF00. border-bottom-style Стиль нижней границы border-bottom-style: none border-bottom-width Вес или толщина нижней границы border-bottom-width: 8px.4.border-style: рон границы border-width Вес или толщина всех че. 56. border-right-style Стиль правой границы border-right-style: border-right-width Вес или толщина правой границы border-right-width: border-top-color Цвет верхней границы border-top-color: #FFFFFF.border-width: Юрх. double. правой. . After 1 #000000 #000066 2 #000033 #FFFF33 3 #000066 #CC6699 4 #000099 #3333FF 5 #FFFFFF #000000 t #FFFF33 #000000 7 «FFFF66 #000000 8 #FFFE99 #663399 Before After Puc. 56. border-left-color Цвет левой границы border-left-color: #O0OOFF.311 ГЛАВА 56.

Если текст в заголовках таблицы излишне многословен: < t h > I n t e n s i t y of the Kenneth Frequency</th> <th>Fluctuation in Beta Transmission</th> <th>Margin of Error</th> можно добавить свои собственные сокращения в атрибут abbr в теге <th>. и текущие инструменты доступности также не используют ее. Применяйте эти методы. Часто задаваемые вопросы Пригодны ли эти советы по повышению доступности таблиц для современных браузеров? На самом деле нет. но не все браузеры поддерживают их. Устройства чтения с экрана заменяют этими сокращениями полную фразу. что сокращает монотонное речевое воспроизведение таблицы данных.312 Строим Web-сайты Каскадными таблицами стилей определяются также другие атрибуты. Затем для каждой ячейки таблицы укажите эти идентификаторы в атрибуте headers. задайте для каждого тега <th> в группе заголовка таблицы уникальные идентификаторы (ID). Для добавления некоторых заключительных штрихов в разметку таблицы потребуется еще немало дополнительных тегов. чтобы сделать таблицы пригодными для следующего поколения технологии Web-просмотра. Чтобы сделать это. Сохраните эти советы в категории «Совместимость снизу вверх». Самые последние версии основных браузеров не используют эту дополнительную разметку. необходимо расставить множество правильных тегов. какие ячейки таблицы под какими ячейками заголовка располагаются. <th a b b r = " I n t e n s i t y " > I n t e n s i t y of the Kenneth Freguency</th> <th a b b r = " F l u c t u a t i o n " > F l u c t u a t i o n in Beta Transmission</th> <th abbr="Error">Margin of Error</th> Можно также точно указать. Повышение доступности Чтобы сделать таблицы данных доступными для более широкого круга людей (включая инвалидов). подобно следующему примеру: <table b o r d e r = " l " rules="groups"> <caption>Table 3: I n t e n s i t y of the Kenneth Frequency and F l u c t u a t i o n in Beta Transmission</caption> <col width="300" a l i g n = " c e n t e r " > <col width="300" a l i g n = " c e n t e r " > .

— > <tbody> <tr> <td headers="intensity">l</td> <td headers="fluctuation">90</td> <td headers="error">6%</td> </tr> <tr> <td headers="intensity">2</td> <td headers="fluctuation">128</td> <td headers="error">35%</td> </tr> <tr> <td headers="intensity">3</td> <td headers="fluctuation">2726</td> <td headers="error">32%</td> </tr> <tr> <td headers="intensity">4</td> <td headers="fluctuation">263443</td> <td headers="error">32%</td> . что вполне нормально. Разработка таблиц данных 313 <col width="160" align="center"> <thead> <tr> <th id="intensity" abbr="Intensity">Intensity of the Kenneth Frequency</th> <th id="fluctuation" abbr="Fluctuation"fluctuation in Beta Transmission</th> <th id="error" abbr="Error">Margin of Error</th> </tr> </thead> <!— В этой таблице отсутствует раздел нижнего заголовка.ГЛАВА 56. которые вам необходимы . Нет необходимости указывать все возможные группы в каждой таблице. Достаточно включить те из них.

где для всех ячеек «intensity» значение атрибута axis равно i n t e n s i t i e s . .ta transmission Margin of Error Puc. но эта дополнительная разметка будет иметь значение для будущих устройств чтения с жрана Другой способ улучшения доступности таблицы данных состоит в группировке ячеек по категориям с помощью атрибута axis. как в следующем примере.Строим Web-сайты 314 . </tr> <tr> <td headers="intensity">5</td> <td headers="fluctuation">2</td> <td headers="error">98%</td> </tr> </tbody> </table> Совет Идентификаторы (ID) всех тегов на странице должны быть уникальными. Таблица. код которой приведен выше. 56. Fto Edit Jflew Favoiites Iools Table 3: Intensity of the Kenneth Frequency and Fluctuations m Beta Transmission Intensity of the Kenneth Frequency Fluctuations in Beta Transmission 90 Intensity of the Kenneth Frequency Margin of E n or 6% 128 35% 2726 32% 263443 32% 2 98% Fluctuations in B. Не используйте тот же самый идентификатор для другого тега заголовка или любого другого HTML-элемента на странице. Имена категорий могут быть любыми — просто используйте имена согласованно. показана на рисунке 56. для всех ячеек «fluctuation» значение атрибута axis равно f l u c t u a t i o n s .10.10. и для всех ячеек «error» значение атрибута axis равно errormargins. Bud таблицы данных в браузере не изменяется при задании идентификаторов (ID) и атрибутов headers.

kenneth" axis="intensities">2</td> .</th> <th id="intensity" abbr="Intensity" axis="intensities">Intensity</th> <th id="fluctuation" abbr="Fluctuation" axis="fluctuations">Fluctuations in Beta Transmission</th> <th id="error" abbr="Error" axis="errormargins">Margin of Error</th> </tr> </thead> <tbody> <tr> <th id="kenneth" rowspan="5" abbr="Kenneth">Kenneth Frequency</th> <td he'aders="intensity kenneth" axis="intensities">l</td> <td headers="fluctuation kenneth" axis="fluctuations">90</td> <td headers="error kenneth" axis="errormargins">6%</td> </tr> .ГЛАВА 56. • <tr> <td headers="intensity. как в следующем примере: <td headerв="первыйзаголовок второйзаголовок третийзаголовок четвертыйзаголовок"> <table border="l" rules="rows"> <caption>Table 4: Intensities of the Kenneth and Bradley Frequencies and Fluctuations in Beta Transmission</caption> <col width="150"> <colgroup span="3" width="150" align="center"> <thead> <tr> <th>&nbsp. разделяйте идентификаторы (ID) заголовков пробелами. . Разработка таблиц данных 315 Совет Если ячейка принадлежит двум или большему числу заголовков.

Строим Web-сайты 316 <td headers="fluctuation kenneth" axis="fluctuations">128</td> <td headers="error kenneth" axis="errormargins">35%</td> </tr> <tr> <td headers "intensity kenneth" axis="intensities">3</td> <td headers1 "fluctuation kenneth" axis="fluctuations">2726</td> <td headers="error kenneth" axis="errormargin§">32%</td> </tr> <tr> <td headers "intensity kenneth" axis="intensities">4</td> <td headers1 "fluctuation kenneth" axis="fluctuations">263443</td> <td headers="error kenneth" axis="errormargins">32%</td> </tr> <tr> <td headers="intensity kenneth" axis="intensities">5</td> <td headers= "fluctuation kenneth" axis="fluctuations' >2</td> <td headers="error kenneth" axis="errormargins">98%</td> </tbody> <tbody> <tr> <th id="bradley" rowspan="5" abbr="Bradley">Bradley 'Freguency</th> <td headers="intensity bradley" axis="intensities">l</td> <td headers="fluctuation bradley" axis="fluctuations">4</td> <td headers="error bradley" axis="errormargins">73%</td> </tr> <tr> <td headers="intensity bradley" axis="intensities">2</td> <td headers="fluctuation bradley" axis="fluctuations">45</td> <td headers="error bradley" axis=:"errormargins">35%</td> .

11.ГЛАВА 56. Разработка таблиц данных 317 </tr> <tr> <td headers="intensity bradley" axis="intensities">3</td> <td headers="fluctuation bradley" axis="fluctuations">356</td> <td headers="error bradley" axis="errormargins">12%</td> </tr> <tr> <td headers="intensity bradley" axis="intensities">4</td> <td headers="fluctuation bradley" axis = "f luctu'ations">32</td> <td headers="error bradley" axis="errormargins">ll%</td> </tr> <tr> <td headers="intensity bradley" axis="intensities">5</td> <td headers="fluctuation bradley" axis="fluctuations">12</td> <td headers="error bradley" axis="errormargins">2%</td> </tr> </tbody> </table> Вид этой таблицы показан на рисунке 56.11. но для будущих устройств чтения с жрана имена атрибута axi s позволят лучше понимать компоновку таблицы . Table 4 Intensities of the Kenneth and Bradley Frequencies and Fluctuations in Beta Transmission Intensity 1 Bradley Frequency " a Margin of Error 90 6% 128 35% 3 2726 32% 4 263443 32% 2 Kenneth Frequency Transmission • 5 2 98% 1 4 73% 2 45 35% 3 356 12% 4 32 11% 5 12 2% L Puc. Группирование ячеек по категориям атрибута axis не влияет на внешний вид таблицы данных в браузере. 56.

f o n t .1. sans-serif. Определение В каскадных таблицах стилей псевдоэлемент (pseudo-element) — это специальное дополнение к селектору HTML-тега. font-variant: small-caps. В настоящее время существуют два псевдоэлемента: f i r s t . . Любая старая таблица стилей могла бы идентифицировать общий стиль абзаца следующим образом: Р ( font-family: Arial. как <table> или <div>.s i z e : 14px. font-size: 14px. p:first-line { font-weight: bold. Они идентифицируют определенные разделы текста внутри HTML-элемента. Только в очень изощренных таблицах стилей добавляются псевдоэлементы. использование псевдоэлементов В каскадных таблицах стилей псевдоэлементы — это специальные дополнения к селекторам HTML-тегов.Полученные эффекты можно увидеть на рисунке 57. Их можно применять к любому текстовому тегу или любым тегам.l i n e и f i r s t . таким. Helvetica.ГЛАВА 57. sans-serif. которое идентифицирует определенную часть текста внутри элемента. что надо делать с первой строкой абзаца: Р ( font-family: A r i a l . которые указывают браузеру. со держащим текст.l e t t e r . Helvetica.

Затем примените специальное определение стиля к атрибуту style тега <span>.2 показан результат действия этих правил стиля. которую хотите изменить. где заканчивается первая строка. как в этом абзаце Часто задаваемые вопросы Как узнать.l e t t e r функционирует во многом так же. When It finally ends. а не на всю первую строку: font-family: Arial. serif. Псевдоэлемент f i r s t .ГЛАВА 57. только он воздействует на первую букву текста. font-weight: bold. IT GOES ON AND ON AND ON A M I ON AND ON AND ON AND ON AND ON AND ON AND ON AND ON AND O N . какой текст обрабатывается псевдоэлементом first-line. font-size: 48px. the style reverts to normal type Рис. Helvetica. где кончается первая строка? Ширина окна браузера определяет. Поэтому дизайнер теряет некоторую степень контроля над тем. 57. .1. p:first-letter font-family: { "Times New Roman". Использование псевдоэлементов Fte £<й View Favortw 319 loots TMS IS THE FIRST LME OF Д PARAGRAPH. Times. Псевдоэлемент first-line идентифицирует специальный стиль для первой строки текстового элемента. sans-serif. воздержитесь от исвместо него заключите в пользования псевдоэлемента first-linen теги <span> ту строку текста. На рисунке 57. font-size: 14px. Если вы хотите сохранить полный контроль над своим текстом.

tnere lived з wickect wltcr.3. two noses on her face. псевдоэлементы first-line ваться с любым текстовым тегом или тегом-контейнером. показанной на рисунке 57. и первые три или порядка этого строк текста в абзаце обтекают ее. two fingernails on each finger. буквица отличается одной особенностью: буквица выходит вниз за базовую линию текста. которые выходят вниз под базовую линию строки текста. как на рисунке 57. and she decided to do something about it Puc.2. Псевдоэлемент first-letter определяет специальный стиль для первой буквы текстового элемента Инструментарий Таблица стилей для буквиц В издательском деле буквица . О псе upon a time. Она выходит вниз за базовую линию текста. in a land far away. ножка строчной буквы р. Однако по сравнению с увеличенной заглавной буквой. как. таким <table> или <div>.это заглавная буква увеличенного размера. например. and three warts on'each nose "he was quite unhappy with her HMO. Определение Нижние выносные элементы (descenders) — это части букв. Определение Буквица (drop cap) — это заглавная буква увеличенного размера. She had three fingers on each hand. 57.2. и соседние строки текста обтекают ее. .Строим Web-сайты 320 Совет Помните: несмотря на то. что в примерах этой главы показаны абзаи first-letter могут использ о цы. обычно находящаяся в самом начале главы. которая обычно располагается в начале главы.

подобно заглавной букве Q в гарнитуре с засечками (serif). two noses on her face.это заглавная буква увеличенного размера. she slept deep in a drainage ditch under a blanket of sticks and rotten leaves Л Рис. /* Атрибут float является секретным оружием. there lived a wicked witch She had three fingers on each hand. and three warts on each nose. Буквица.dropcap:first-letter font-family: Times. как фоновый цвет и дополнительное пустое пространство. Элемент может свободно перемещаться влево или вправо. 63px.Tools Hefc O nce upon a time. тогда как обычные заглавные буквы занимают три строки. которое заставляет работать буквицу. which rendered her powerless. По высоте буквица должна занимать от трех до четырех строк текста. расположенными ниже базовой линии. then she retired to her study and practiced the black arts until the first light of day To escape the sun.3. Использование псевдоэлементов Fte 321 Edit flew FavwitM . in a land far away. /* Данный размер шрифта выбран в предположении. Заглавные буквы с нижними выносными элементами или частями. two fingernails on each finger. */ float: left. Когда элемент плавает. */ . Следующая пара строк текста обтекает буквицу В этом «Инструментарии» приводится правило стиля для буквиц. занимают четыре строки текста. font-weight: font-size: { Georgia. потребуется подогнать стиль для конкретной страницы в зависимости от гарнитуры и размера шрифта основного текста.ГЛАВА 57. 'Times New Roman". браузер окружает его соседними элементами. Просто скопируйте и вставьте его в существующую таблицу стилей. p. bold. такие. She woke up every night prompty at 10:00 She ate a sensible oreakfast of two frogs and a dried bat wing. 57. s e r i f . Возможно. что размер основного текста равен 14 пикселам и что буквица занимает от трех до четырех строк текста. Не бойтесь изменять размер шрифта. В правило стиля можно добавлять также другие CSS-атрибуты. которая выходит вниз за базовую линию текста.

по крайней мере. .r i g h t : 2рх. как в следующей строке кода: . задайте для любого абзаца класс d r o p c a p : <р class="dropcap">Once upon a time. чем в Netscape. просто удалите тег абзаца из селектора. не влияют на внешний вид буквицы в Internet Explorer. margin-bottom: -12рх. но одновременно добавляются дополнительные 12 пикселов пустого пространства перед началом абзаца.. что приведен в этом «Инструментарии».. /* Добавление небольшого пустого пространства справа от буквицы помогает избежать соприкосновений буквицы с окружающими строками текста. выглядят лучше в Internet Explorer. i n a l a r d far away. поэтому данное решение проблемы пригодно для обоих браузеров. Чтобы улучшить вид данного стиля в Netscape.</p> Поскольку область применения класса dropcap в этом «Инструментарии» ограничивается абзацами. чтобы класс dropcap работал с любым подходящим элементом. поскольку браузером Netscape добавляется чрезмерная величина пустого пространства над верхом буквицы. добавьте в определение стиля фоновый цвет. включая абзацы. В результате буквица будет помещена внутрь цветного прямоугольника и пустое место над буквой будет меньше бросаться в глаза. Отрицательные поля. буквицу нельзя добавить в заголовок. Если необходимо. В этом случае буквица сдвигается вверх. включая тот.dropcap:first-line { Часто задаваемые вопросы Эта буквица выглядит нелепо в браузере Netscape. таблицу или тег любого другого типа. как правило. состоящим в добавлении в определение стиля отрицательных значений верхнего и нижнего полей: margin-top: -12рх.Строим Web-сайты 322 p a d d i n g .. */ Чтобы использовать данное правило стиля. Для улучшения внешнего вида можно воспользоваться очевидным искусственным приемом. В чем проблема? Стили буквицы.

если не одноразовый стиль? Поэтому без всяких сомнений код. что имеется в распоряжении. В действительности селектор идентификатора настолько привилегирован. что применяется к одному и только к одному элементу на странице Никакие два элемента не должны принадлежать одному и тому же идентификатору. color: #FF00FF. даже если элементы относятся к одному и тому же типу: абзацам. Затем задайте атрибут id тега. изображениям.w e i g h t : bold. который применяется к одному и только к одному элементу на странице. Для определения селектора идентификатора применяется специальный синтаксис а именно. относящемуся к определенном)' тегу.ГЛАВА58. которые находятся в атрибуте s t y l e HTML-тега. Определение стилей идентификаторов Селектор идентификатора (ID) в каскадных таблицах стилей во многом подобен классу. к которому требуется применить стиль: <р id="barney">3TOT абзац имеет идентификатор ID of "barney"</p> Идентификаторы (ID) удобно использовать в качестве заменителей правил стиля. подобный следующему: <р s t y l e = " f o n t . ссылкам или тому. в том отношении. Определение Селектор идентификатора (ID selector) — это селектор. color: #FF0000. что помещение CSS-кода в атрибут s t y l e лучше всего действует для одноразовых стилей. c o l o r : #FF0000.">Alert!</р> можно заменять чем-нибудь. знак порядкового номера (#). за которым следует имя идентификатора: #barney { font-weight: bold. что он является привилегированным клубом. похожим на следующий блок кода: <style type="text/css"> #alert { font-weight: bold. 11' . Что такое идентификатор (ID). Вспомните.

все элементы отобразятся со стилем идентификатора (ID). Alert! Alert! Puc. Поэтому. вы предпочтете использовать идентификатор вместо вставки правила стиля в атрибут неуклюжего старого HTML-тега. как атрибут s tyl e HTML-тега (внизу). Браузер обрабатывает идентификаторы (ID) как классы.1. если применить один и тот же идентификатор (ID) к нескольким элементам? Вы не попадете в тюрьму. Однако вы создадите для себя всевозможные проблемы. метод идентификаторов может быть для алс чуть более ясным. если вы используете один и тот же идентификатор (ID) для нескольких элементов. более привлекательным и по смыслу более близким к каскадным таблицам стилей.324 Строим Web-сайты </style> <body> <p id="alert">Warning!</p> </body> Как можно видеть на рисунке 58. использующие метод getElementBylD. Оставьте идентификаторы для специальных классов. Часто задаваемые вопросы ЧТО произойдет. если вам требуется стиль класса. Если ваши идентификаторы (ID) не являются уникальными. оба метода приводят к одному и тому же результату. функции не будут работать надлежащим образом. Получаемые результаты идентичны . и определяет одноразовое правило стиля. Если вы эстет в области кодирования. когда настанет время добавить на страницу функции JavaScript. поэтому. и вы не разрушите Интернет. Стиль идентификатора (ID) (внизу) работает точно так же.1. Возможно. создайте стиль класса. хотя требуемого результата позволяет достичь любой из методов. ваш компьютер не взорвется. 58.

ЧАСТЬ 5. Ссылки Применение стилей к гиперссылкам Дискуссионная тема: в защиту подчеркивания ссылок Создание ролловерных гиперссылок Выбор надлежащего пути Изменение цвета одиночной гиперссылки Выбор подходящего текста для гиперссылки Создание экранных подсказок для гиперссылок Открытие нового окна браузера Использование именованных анкеров Создание ссылок электронной почты .

о посещении которой в браузере нет сведений. Как можно видеть.1. В каскадных таблицах стилей псевдокласс — это специальное дополнение тега-анкера. к какому состоянию ссылки применяется правило стил я. В браузере Internet Explorer цвет активной ссылки отображается также в том случае. которое сообщает браузеру.ГЛАВА 59. 59. Непосещенная ссылка — это ссылка на страницу. HTML-атрибуты ссылки Атрибут Управляемое свойство link Цвет непосещенной ссылки vlink Цвет посещенной ссылки alink Цвет ссылки. сведения о посещении которой имеются в браузере. Активная (active) ссылка — это ссылка. Определение Непосещенная ссылка — это ссылка на страницу. v l i n k и a l i n k . Применение стилей к гиперссылкам ЯЗЫК HTML предоставляет основной набор атрибутов для управления внешним видом гиперссылок на Web-странице. сведения о посещении которой имеются в браузере. . что Интернет приобрел такую популярность с таким ограниченным набором конструктивных возможностей для наиболее важного элемента на любой Web-странице. Табл. v i s i t e d и a c t i v e . когда посетитель выделяет ссылку. Наконец. На самом элементарном уровне каскадные таблицы стилей воспроизводят функции атрибутов l i n k . v l i n k и a l i n k с помощью псевдоклассов l i n k .1. Посещенная ссылка — это ссылка на страницу. По умолчанию цвет непосещенных ссылок — синий. активная ссылка — это ссылка. Трудно поверить. Имеется три цвета ссылки для трех ее состояний и это все. на которой щелкают мышью в текущий момент. По умолчанию цвет посещенных ссылок — фиолетовый или ярко-красный. Однако возможности дизайна сильно расширяются при использовании для форматирования ссылок каскадных таблиц стилей (CSS) вместо атрибутов HTML. на которой IL елкают кнопкой мыши или когорая выделена Чтобы задать пользовательские цвета для состояний ссылки на странице. о посещении которой в браузере нет сведений. HTML привязывает их к трем состояниям ссылки: непосещенное состояние. Эти атрибуты включаются в тег <body>: <body l i n k = " # 0 0 0 0 F F " vlink="#FFOOFF" a l i n k = " F F 0 0 0 0 " > Все атрибуты ссылки сведены в таблицу 59. Посещенная (visited) ссылка — это ссылка на страницу. укажите: их непосредственно с помощью атрибутов l i n k . посещенное состояние и активное состояние. Для разделения трех состояний используется цвет. на которой в текущий момент щелкают мышью или которая выделена.

что большинство людей не представляют. фокус переходит с гиперссылки и при этом возвращается ее цвет по умолчанию. a:visited { color: #FF00FF. как и HTML-атрибуты. Следующий блок CSS-кода оказывает такой же эффект. Если еще раз нажать клавишу Tab. color: #0000FF. Применение стилей к гиперссылкам 327 В главе 57 рассматривались псевдоэлементы f i r s t . соответствующий цвету либо посещенной. что в браузерах Internet Explorer и Netscape можно перемещаться по Web-сайтам без использования мыши. устанавливая на нее фокус. потому. но не всякий знает.ГЛАВА 59. чтобы активизировать его. к какому состоянию ссылки применяется правило стиля. Вот как это работает: вы циклически перемещаетесь по интерактивным элементам на странице. этот браузер не меняет цвет выделенной ссылки на цвет ее активного состояния. нажимая клавишу Tab. как щелкать на гиперссылке. но в настоящее время они применяются только к тегу-анкеру. Псевдоклассы сходны с ними.l i n e и f i r s t . как выделить гиперссылку. окрашивая ее в цвет активной ссылки. А так выделяется гиперссылка: нажимая клавишу Tab. либо непосещенной ссылки. Браузер Internet Explorer изменяет внешний вид ссылки. в основном. все знают. Хотя ссылки можно выделять и в Netscape. приведенные в теге <body> в начале этой главы: arlink {. сообщающее браузеру. а после перехода на требуемый элемент нажимаете клавишу Enter. Часто задаваемые вопросы Как выделить гиперссылку? Несомненно. если выражаться на интернет-жаргоне.l e t t e r . a:active . переходите на гиперссылку. Определение Псевдокласс (pseudo-class) — это специальное дополнение для селектора тега-анкера.

Эти стили показаны на рисунке 59. . Обратите внимание. 59. font-weight: bold. помимо окрашивания разных состояний ссылки в разные цвета На некоторых Web-сайтах вокруг гиперссылок добавляется едва различимый фоновый цвет.1. a:visited { color: #FF00FF. при этом посещенные ссылки кажутся менее важными. как на рисунке 59. font-weight: bold. Here is an mivisited link Here is an unvisited link Here is a Here is an unvmted link Puc. создающий эффект блока. который можно усовершенствовать. Как насчет выделения непосещенных и активных ссылок полужирным шрифтом и оставления посещенных ссылок с нормальным начертанием? a:link { color: #0000FF. a:active { color: #FF0000.2.Строим Web-сайты 328 • color: #FF0000. как полужирное начертание помогает выделить на Web-странице непосещенные ссылки. font-weight: normal.1. Используйте каскадные таблицы стилей для изменения других свойств ссылок. Эти правила стилей представляют начальный продукт.

a:visited { color: #FF00FF. */ a:link { c o l o r : #0000FF. Here is an uiivmter! link . background-color: состоянию ссылки соответствует #CCFFFF. чтобы создать эффект блока Листинг 59. . Добавьте атрибут background-color в правило стиля для ссылки или состояния ссьтки. как на рисунке 59. background-color: #CCCCFF. Можно также выключить используемое по умолчанию подчеркивание.ГЛАВА 59. Применение стилей к гиперссылкам fje £« Yievi Favorites loois 329 Help Here is an unvmted link Here is an mivisiled link Here is a ияЫ1мк. background-color: #FFFFCC. 59. Исходный код страницы.3.2 а { font-weight: bold. a:active { color: #FF0000. /* В этих правилах стилей каждому свой фоновый цвет. вид которой в браузере показан на рисунке 59. font-weight: normal.1.2.

3 а { font-weight: bold. /*' Для выделения гиперссылки.2. • • text-decoration: none. */ .3. a:active { color: #FFOOOO. 59. Исходный код страницы. поэтому в отсутствие подчеркивания в этих правилах стилей используется полужирное начертание для всех трех состояний ссылок. необходима какая-нибудь визуальная подсказка. a:visited { color: #FFOOFF. a:link { color: #OOOOFF. ' background-color: #CCCCFF. . background-color: #CCFFFF. Подчеркивание гиперссылок отключено Листинг 59.Строим Web-сайты 330 Here is an imviiited link Here is an unviuted link Here is a visiteci link Here if an «nvisitpd link Рис. background-color: #FFFFCC. вид которой в браузере показан на рисунке 59. . отличная от -цвета.

Но подчеркивание желательно сохранить не только по этой причине.ГЛАВА 59. Люди. Именно поэтом)' следует проявлять осторожность и не подчеркивать элементы. Как дизайнеру. ценят возможность быстрого поиска информации. Очевидно одно: большинство гиперссылок использует подчеркивание. посетители не могут применить свои знания о том. разрабатывайте состояния ссылок с помощью каскадных таблиц стилей. что оно обозначает. В действительности. которые не являются гиперссылками. Можно даже удалить святая святых — подчеркивание гииерссылок. которым нравится Интернет. скорость. что они щелкают на любом элементе. Но прежде чем отказаться от подчеркивания. На самом первом из когда-либо созданных Web-сайтов была гиперссылка. хорошенько подумайте. вам следует помнить об этих фактах. если бы на всех Web-сайтах использовалось одни и те же правила оформления. Применение стилей к гиперссылкам 331 Дневник: 8 защиту подчеркивания ссылок Каскадные таблицы стилей великолепны. содержащем подчеркивание. Знания и опыт путешествий по Интернету обычно не одно и то же. поэтому вам необходимо что-нибудь для привлечения их внимания к гиперссылкам. Интернет был бы менее интересным. как работает Интернет. даже если этот элемент не является гиперссылкой. это очевидно для вас. это означает. Интернет . Они в действительности не читают текст. когда они работают. И по этой же причине следует подчеркивать элементы. занимающиеся Web-серфингом скользят не только по Web-сайтом. Все знают. Подчеркивание работает идеально. Вместе с тем. какие соглашения по стилям используются на вашем Web-сайте. Существует лишь одна проблема. прежде всего. неподчеркнутые гиперссылки заставляют посетителей задумываться о том. Измените размер шрифта. Те. но и по информации. так что существует давняя традиция применения этого элемента оформления. но вы — дизайнер. кто бороздит Интернет. Во что бы то ни стало. что они не сумеют перемещаться по вашему ресурсу на высоких скоростях. и для этой гииерссылки использовалось подчеркивание. Вы хотите. именно по этой причине удаление подчеркивания так притягательно. . Добавьте курсив. пока не найдут нужные им сведения. Они позволяют делать всякие интересные вещи с HTML-элементами. к которым они привыкли. чтобы посетители могли перемещаться по вашему Web-сайту быстро и непринужденно. для просмотра вашего Web-сайта. Используется ли для этого полужирное начертание? Курсив? Слова в цветных прямоугольниках? Конечно. Другими словами. Подчеркивание легко различимо и посетителям не требуется задумываться. Зачем портить отличную вещь? Кроме того. которые являются гиперссылками. чтобы сделать вид своих Web-сайтов уникальным.это. Добавьте полужирное начертание. что оно указывает на гиперссылку. Дизайнеры любят отказываться от подчеркивания. Измените гарнитуру. настолько привыкли к вездесущему подчеркиванию. что составляет важную часть работы дизайнера.

1. Используйте псевдокласс hover. которое управляет всеми тегами-анкерами. включая несоответствия или изменения для основных правил (подобно переходу от нормального начертания в обычных ссылках к полужирному начертанию в ролловерных ссылках). когда пишутся привила стилей для состояний ссылок. Определение Выделенное состояние (hover state) описывает ссылку. не требуется повторять. Но когда посетитель наводить указатель на ссылку. которое применяется только к ссылкам. Все. без подчеркивания. Следующая таблица стилей включает правило для выделенного состояния: а { font-weight: bold.— l i n k . чтобы создать ролловерные стили для гиперссылок в каскадных таблицах стилей. Стиль h o v e r может включать любую каскадную таблицу стилей. Если выделенная ссылка не помещается в то же пространство. в ролловерном состоянии ссылка может увеличиваться в размере или по толщине начертания. просто включите определения для дополнительного форматирования. браузер перерисовывает всю Web-страницу при наведении . Еще одно состояние ссылки означает наличие еще одного псевдокласса каскадных таблиц стилей. вступает в действие правило специального стиля. . Определения стилей.ого по умолчанию. используем.ГЛАВА 6 0 . что и стандартная ссылка. В каскадных таблицах стилей добавляется четвертое состояние ссылки: выделенное состояние (hover state). может изменяться ее стиль. автоматически применяется к псевдоклассам. которая применяется к тексту. Таким образом. когда посетитель наводит на нее указатель мыши. v i s i t e d и a c t i v e — и вы обратили внимание. что относится в общем стиле к тегам-анкерам. Как видно на рисунке 60. Просто внимательно относитесь к большим изменениям стандартной ссылки. • text-decoration: none. которое хотите применить. благодаря правилу общего стиля. что нет необходимости включать полужирное начертание в npaiu iло стиля для выделенного состояния. цвет. когда посетитель наводит на нее указатель мыши. и появляется подчеркивание. ссылки отображаются с полужирным начертанием. элементы украшения и так далее. на которые наведен указатель. } a:hover { text-decoration: underline. которые остаются одинаковыми для разных состояний ссылок. которое описывает ссылку. Создание роллоберных гиперссылок В главе 59 рассматривались три псевдокласса каскадных таблиц стилей . что они соответствуют трем состояниям ссылок в HTML. а еще один псевдокласс означает еще одну возможность для создания особого стиля. Обратите внимание. Следовательно.

Создание роловерных гиперссылок 333 указателя на ссылку. С помощью псевдокласса hover можно создать ссылки. Найдите другой способ выделить ролловер.2. 60. что может смутить посетителей или даже вынудить их отказаться от дальнейшего просмотра Web-сайта. 60. Puc. то и не удаляйте подчеркивание в ролловерном состоянии. а при наведении указателя на ссылки подчеркивание исчезает. Некоторые посетители могут сделать вывод. используемое по умолчанию. . однако не чувствуется. ролловерная ссылка должна выглядеть как активизирующаяся. что ролловер переходит из низкоэнергетического состояния в высокоэнергетическое состояние. а не как закрывающаяся. Если вы не хотите удалить подчеркивание. например. чтобы вместить ссылку с этим чрезмерно большим ролловерным стилем Совет Некоторые дизайнеры любят создавать ролловеры ссылок. поскольку подчеркивание. помогает посетителям уяснить.1. что ссылки так и не являются активными. Хотя данная стратегия не лишена смысла. Сравните этот рисунок с рисунком 60. The visitor isn't l i o v n i n a «ver this lmk The visitor isn't hovering ov-r this folk.1. которые по умолчанию отображаются подчеркнутыми. используемое по умолчанию. Когда подчеркивание пропадает.ГЛАВА 60. The v havering over this link The visitor isn't hovering over this lmk Рис. как на рисунке 60. что браузер перерисовывает страницу. ссылка выглядит как закрывающаяся — она переходит из состояния с высокой энергией в состояние с низкой энергией.2. и вы увидите. с помощью перехода от нормального к полужирному начертанию или посредством добавления фонового цвета. С психологической точки зрения именно этого ожидает посетитель. Каким бы не был выбранный стиль. которые изменяют свой внешний вид при наведении на них указателя мыши The visitor h n ' l hovering over ths tmk The «inter Щ}4 hovtmnK °ver this bnk I h f visitor is hover ing „«. какие элементы на странице являются гиперссылками.

v Определение Путь (path) гиперссылки сообщает браузеру. использование абсолютных путей Абсолютный путь предоставляет полный путь URL (Uniform Resource Locator — унифицированный указатель информационного ресурса) требуемой Web-страницы. которая загружается при щелчке пользователем на ссылке. р е а г з о п . как в следующем примере: <а h r e f = " h t t p : / / w w w . Относительный путь. указываемые относительно корня. как добраться до требуемой страницы с текущей Web-страницы. указываемый относительно документа. как добраться до требуемой страницы с текущего Web-сайта. сообщает браузеру. Выбор надлежащего пути Путь гинерссылки подобен набору управляющих инструкций для браузера. сообщает браузеру как добраться до требуемого документа с текущей Web-странйцы. как добраться до связанной страницы. Абсолютный путь сообщает браузеру. и относительные. как добраться до требуемой страницы из любого места в Интернете. с о т / " > А б с о л ю т н ы й путь</а> . Существует три типа путей: абсолютные. включая префикс «http://www». как добраться до загружаемой Web-страницы. указываемый относительно документа (document-relative): сообщает браузеру. указываемый относительно корня. которые рассматриваются в данной главе. относительные. Он сообщает браузеру. Определение Абсолютный (absolute) путь сообщает браузеру. как добраться до требуе мой страницы с текущего Web-сайта. тогда как относительный путь.ГААВА61. как добраться до требуемой страницы из любого места в Интернете. указываемый относительна корня (root-relative). указываемые относительно документа. Выбор типа пути зависит от способа. как добраться до страницы. Относительный путь. сообщает браузеру. который требуется использовать для сообщения браузеру о том. когда посетитель щелкает на ссылке. У каждого типа пути есть свои достоинства и недостатки. Относительный путь.

Если открыть окно браузера в автономном режиме для тестирования собственного Web-сайта. не работают с внешними страницами. которые указывают на страницы собственного Web-сайта. если изменяется положение страницы в иерархии вашего Web-сайта. как правило. предназначены исключительно для внутренних ссылок. чтобы абсолютные пути работали. независимо от того. Страницу с абсолютной ссылкой можно перемещать в любое место на своем Web-сайте и ссылка всегда будет соединять с требуемой страницей до тех пор. пока путь URL в атрибуте h r e f будет точным.ГЛАВА 61 • Выбор надлежащего пути 335 Другими словами. вводимым в браузере в поле адреса. указываемые относительно документа или корня. в каком месте Интернета просматривает ресурсы браузер. то при щелчке на ссылке с абсолютным путем браузер откроет подключение к Интернету. указываемые относительно документа (document-relative) или корня (root-relative). На практике для этих целей следует обязательно использовать абсолютные пути. для вашего компьютера должно быть установлено активное подключение к Интернету. абсолютный путь полностью совпадает с путем URL. находящуюся в пределах вашего Web-сайта. его не надо обновлять в исходном коде. Относительные пути. Чтобы перейти на требуемую страницу. указываемые относительно документа. Определение ' Внутренняя ссылка (internal link) — это ссылка на страницу. которые не принадлежат вашему Web-сайту. Для внутренних ссылок. тогда как внешняя ссылка (external link) — это ссылка на страницу за пределами вашего Web-сайта. Поскольку абсолютный путь всегда одинаков. Относительные пути. Совет Используйте абсолютные пути для внешних ссылок (external links) или для ссылок на страницы. эти пути могут быть громоздкими для внутренних ссылок (internal links) или для ссылок. когда используется другой компьютер или когда вы находитесь на другом Web-сайте. . указываемые относительно документа? Нет. Но поскольку необходимо приводить полный путь URL при каждой записи абсолютного пути. не надо вводить другой URL. Именно это свойство делает путь абсолютным — он всегда одинаков. Часто задаваемые вопросы Можно ли использовать для внешних ссылок относительные пути. лучше подходят относительные ссылки. Кроме того.

необходимо знать иерархию своего сайта. Относительный путь. Возьмем следующую структуру сайта: • Домашняя страница • • • Фильмы • Приключения • Комедии • Драмы • Романтические • Детективы • Ужасы • Научная фантастика Музыка • Популярная • Джаз • Классика Игры • Компьютерные • Консольные Допустим.1л1:т">С домашней страницы на страницу "Приключения"</а> Однако если текущая страница изменяется. указываемом относительно документа. что для написания действующего относительного пути. указываемый относительно документа. путь будет выглядеть следующим образом: .htm">C домашней страницы на страницу мы" </а> "Филь- тогда как для страницы «Приключения» в категории «Фильмы» относительный путь. в применении к странице «Фильмы» o f носительно домашней страницы будет выглядеть следующим образом: <а href="фильмы/фильмы. Это делается путем пошагового перемещения браузера по иерархии сайта.336 Строим Web-сай [ 11 использование относительных путей. изменяется и относительный путь. а не с домашней страницы. будет следующим: <а h r e f = "фильмы/приключения/приключения. Для перехода на страницу «Приключения» со страницы «Фильмы». что текущей страницей является домашняя страница. Следует тогда отметить. вы сообщаете браузеру как добраться до требуемой страницы с текущей Web-страницы. указываемого относительно документа. указываемых относительно документа В относительном пути. указываемый относительно документа.

потребуется несколько наборов двоеточий: <а h r e f = " . чтобы найти файл фильмы. мог бы выглядеть следующим образом: <а href=". то браузер переходит в иерархии на один уровень вверх. Выбор надлежащего пути 337 <а href="приключения/приключения.Ь1:т">Со страницы "Научная фантастика" на страницу "Классика"</а> Если описывать действия на обычном языке. чтобы найти папку музыки. указываемых относительно документа. . это направить браузер к надлежащему каталогу и файлу относительно текущей страницы.ГЛАВА 61. указываемые относительно документа. приведенные выше.. Все. / i n d e x . и внутри папки классики ищет файл классика.htm. .. Относительный путь. указываемый относительно документа. чтобы найти файл index. указываемом относительно документа.htm. h t m " > C o страницы "Научная фантастика" на домашнюю страницу</а> Данный относительный путь предписывает браузеру перейти на два уровня вверх в структуре сайта. указываемом относительно документа. нет необходимости указывать префикс «http://www» или имя домена для своего сайта. В одном и том же относительном пути. он понимает. Полезное свойство относительных путей. . как и в интерактивном режиме.) являются компьютерным кодом действия «Перейти на один уровень вверх в структуре сайта». Как записать относительный путь.фильмы. Он ищет внутри папки музыки папку классики. состоит в том. Подобным образом. что необходимо вернуться на один уровень назад по иерархии. Другими словами. как Macromedia Dreamweaver. для страницы «Фильмы» относительно страницы «Фантастика»? Потребуется некоторая техническая терминология: <а href=". Скажем. что они работают в автономном режиме также хорошо. можно тестировать сайт автономно в браузере без . а что если необходимо возвращаться в обратном направлении по иерерархии Web-страниц. можно комбинировать перемещения вверх и вниз по структуре сайта.htm. / . требуется перейти со страницы «Ужасы» в категории «Фильмы» на страницу «Классика» в категории «Музыка». что необходимо сделать.htm">Co страницы "Фильмы" на страницу "Приключения"</а> Как можно видеть. Таким образом./Музыка/Классика/классика. указываемом относительно документа. касались переходов вглубь структуры сайта. указываемый относительно документа. если необходимо перейти со страницы «Научная фантастика» назад на несколько уровней в направлении к домашней странице. Совет При перемещении страниц в структуре сайта инструменты управления сайтами такие. Adobe GoLive и Microsoft FrontPage автоматически обновляют относительные пути. Все объяснения.htm">Co страницы "Научная фантастика" на страницу "Фильмы"</а> Две точки (. если браузер находится на странице «Научная фантастика» и видит две точки в относительном пути. Все это подразумевается в относительном пути.

указываемые относительно корня (root-relative paths). указываемый относительно корнж/а> Относительные пути. направляет браузер вверх и вниз по иерархии сайта. Эта проблема отсутствует для абсолютных путей. Помните. указываемый относительно документа. указываемых относительно корня Относительные пути. Если страница не находится в прежнем положении в иерархии. действуют в полном объеме. Взяв в качестве примера иерархию сайта из предыдущего раздела данной главы. . т. при этом все ссылки с относительными путями. шаги перемещения по структуре сайта не будут совпадать с Прежней последовательностью шагов. что они используются только для внутренних ссылок и не применяются для внешних ссылок. содержащей ссылку на другой уровень сайта. в том. указываемыми относительно документа. получим для страницы «Классика» следующий относительный путь. относительный путь. больше похожи на абсолютные пути.htm">l43 корня к странице "Классика"</а> Абсолютный путь для этой страницы выглядит точно также. ссылка больше не будет работать. Поэтому относительный путь. Совет Корень (root) сайта — это самый верхний уровень сайта. начинаются с левой косой черты (/). использование относительных путей. и они описывают положение целевой страницы относительно корня (root) или самого верхнего уровня вашего сайта. Однако относительные пути. указываемые относительно корня.Строим Web-сайты 338 необходимости подключаться к Интернету. ни имя домена для сайта: <а href="/index. указываемые относительно корня. Путь не изменяется в зависимости от текущего положения браузера. всегда одинаков. Основной недостаток относительных путей. поскольку абсолютные пути не зависят от текущего положения браузера. указываемый относительно корня.htm">Относительный путь. указываемый относительно корня: <а href="/музыка/классика/классика.к. указываемых относительно документов — при перемещении страницы. хотя в них не указывается ни префикс «http://www». не изменяется сам корень сайта. сходны с относительными путями. указываемыми относительно документа (document-relative paths). как и абсолютный путь. только добавляются префикс «http://www» и имя домена для сайта.

Часто задаваемые вопросы Итак. поскольку путь всегда начинается от корня сайта. но и с установленным подключением к Интернету (если только на вашем персональном компьютере не установлен Web-сервер). Если требуется загружать страницы и для тестирования. имеют один роковой недостаток — они работают только на Web-сервере. но для этого требуются специальное программное обеспечение и оборудование. указываемые относительно корня. Обычно вы загружаете свои страницы на сервер после того. но также ставит разработчика в неудобное положение. Однако относительные пути. Профессиональные разработчики Web-сайтов обходят проблему с относительными путями. предназначенным для отладки и тестирования. указываемые относительно корня? В действительности вы можете. являющийся личным Web-сервером. одним из двун способов: устанавливая Web-сервер на своем персональном компьютере или загружая страницы на вспомогательный сервер (staging server).ГЛАВА 61. Страницу с относительным путем. кажутся более удобными для внутренних ссылок. . указываемым относительно корня. Ссылки с относительными путями. можно перемещать на другой уровень в структуре сайта. как они протестированы и отлажены. я не могу тестировать в автономном режиме относительные ссылки. указываемые относительно документов. Это связано не только с дополнительными усилиями. которые еще не готовы и находятся в процессе тестирования и отладки. чем относительные пути. Для тестирования ссылок требуется загрузить страницы на Web-сервер. указываемые относительно корня. посетители вашего сайта могут наткнуться на страницы. невозможно тестировать не только автономно. указываемыми относительно корня. указываемыми относительно корня. и ссылка будет по-прежнему работать. Выбор надлежащего пути 339 При поверхностном взгляде относительные пути.

вы акцентируете внимание на различии между ссылками. а одну конкретную непосещенную ссылку красной. чтобы этот же цвет применялся для ссылки независимо от ее состояния. Однако применение этих методов полностью правомерно для изменения цвета ссылок. можно создать стиль класса для управления специальным цветом гиперссылки: <style type="text/css"> a.special { . v l i n k и a l i n k . Любое отклонение от образца цветовой схемы стандар ных ссылок связано с риском запутать аудиторию своего сайта.ГЛАВА 62. запускающими сценарии. какие страницы вашего сайта уже просмотрены ими. используемого по умолчанию для всех состояний ссылок ЕСЛИ требуется изменить цвет. изменение цвета одиночной гиперссылки В обычном коде HTML не существует способа для изменения цвета одиночной гиперссылки на странице. / s p e c i a l . например. если то же самое форматирование применяется к нескольким ссылкам на странице. если вы не используете каскадные i и>лицы стилей. которые позволяют им судить о том. Поступая таким образом. В теге <body> доступны атрибуты l i n k . . что у вас нет такой возможности. и ссылками. запускающих сценарии. независимо от состояния ссылки и используемых по умолчанию цветов ссылки. которые определяют цвета в равной степени для всех ссылок. и если необходимо. изменяя цвета отдельных ссылок слишком часто. изменение цвета. что помогает сделать сайт более удобным для использования. В альтернативном варианте. нет возможности сделать стандартные непосещенные ссылки синими. которые предоставляют пару разных способов для изменения цвета од| [ночной ссылки. Совет Будьте осторожны. просто добавьте правило стиля в атрибут s t y l e тега-анкера ссылки: <а h r e f = " . предназначенными для загрузки страницы. с целью обособления их от обычных гиперссылок. в который ссылка окрашена по умолчанию. и у вас.">Смотрите экстрен- В этом примере гиперссылка всегда отображается красной. Посетители вашего сайта полагаются на цвета ссылок. Это означает. h t m " ный выпуск</а> style="color: #FF0000.

htm">CMOTpMTe дополнительный экстренный выпуск</а> </body> Теперь любые теги-анкеры. special:link { color: #FF0000. ./speciall. } </style> <body> <a class="special" href=". изменение стандартного цвета для отдельных состояний ссылок ЕСЛИ требуется менять специальный цвет ссылки в зависимости от состояния ссылки.special:visited { color: } • • • . Нет проблем — просто создайте специальный стиль класса подобный следующему: <style type="text/css"> a. .. имеют одинаковые свойства цвета независимо от состояния ссылки и стандартных цветов ссылок.ГЛАВА 62. Изменение цвета одиночной гиперссылки color: 341 #FF0000. a. атрибут s t y l e тега-анкера не поможет сделать это. поскольку необходим доступ к псевдоклассам тега-анкера. a./special2. принадлежащие классу s p e c i a l . #CC0000.special:active { color: #990000.ЬЬш">Смотрите экстренный выпуск</а> <а class="special" href=". ..

Но все правила стилей принадлежат одному классу .таким образом. . отличным от других. когда тег-анкер присоединяется к классу.. а для активного (active) и выделенного (hover) состояний отдельные цвета не требуются. • <а class="special" href =" ./special2 . Стандартные ссылки на странице могут иметь активное и выделенное состояния.111:т">Смотрите дополнительный экстренный выпуск</а> </body> В этом примере представлены четыре правила стилей для четырех CSS-состояний ссылки. Если для специальной ссылки необходимо использовать отдельные цвета для посещенного (visited) и непосещенного (unvisited) состояний.s p e c i a l . каждое со своим.ЬЬш">Смотрите экстренный выпуск</а>.special:hover { color: #660000-. которые применяются к ссылке. </style> <body> '• <a class="special" href=".Строим Web-сайты 342 а. применяются все четыре правила стилей. создайте стили только для состояний link и visited. . Состояние ссылки определяет. но они не будут относиться к специальному классу. Достаточно определить состояния. цветом. Совет Нет необходимости приводить правила стилей для всех четырех состояний ссылки./speciall. какой цвет будет использоваться независимо от стандартного цвета для этого состояния.

Content goes here Content goes here. Content goes here Content goes here.1 <а href=".. проследовав по предлагаемому пути. на котором должны будут щелкать кнопкой мыши посетители. Действительно.1. Рис./index. заключите в теги-анкеры каждый из вариантов навигации .htm">SERVICES</a> <a href="./aboutus. какой текст должен заключаться в теги-анкеры? Первое практическое правило для любой текстовой гиперссылки заключается в следующем: ссылка должна сообщать посетителю. Content goes here. что ссылки должны быть полными именами категорий навигации. очевидно. Когда существует список ссылок. которые функционируют как часть системы навигации на сайте.1.htm">HOME</a> I <a href=". поскольку оно полностью сообщает посетителю. 63. Разработка гиперссылки — это полностью другое дело.htm">PRODUCTS</a> <a href-'. Content goes here./products./services. Листинг 63. Выбор подходящего текста для гиперссылки Создание гиперссылки не представляет трудностей. Это означает. Если существует список ссылок. как на рисунке 63. куда ведет ссылка и какие сведения посетитель получит. Иногда выбор очень прост. куда ведут ссылки.1. вид которой в браузере показан на рисунке 63. которые функционируют как часть системы навигации на сайте. Исходный код страницы..ГЛАВА 63.. Данное текстовое описание удовлетворяет требованиям первого практического правила для гиперссылок. что текст ссылки должен подсказывать..htm">ABOUT US</a> Г File Edit JJew Favorites Xools Page Title Content goes here. В пару тегов-анкеров заключается фрагмент текста. что следует ожидать от щелчка на ней. Content goes here Content goes here Content goes here Content goes here Content goes here.

Content :s here Content goes here. Content goes here. Content goes here. Content goes here. Чисто технически эта стратегия отвечает требованиям первого практического правила для гиперссылок. Content goi here. хотя некоторые дизайнеры иногда делают это. Content goi s here.3.s here Content goes here.2 <рха href = " h t t p : //external_site01">External Site 1</ах/р> <рха href = " h t t p : //external_siteO2">External Site 2</ax/p> <pxa href = " h t t p : //external_siteO3">External Site 3</ax/p> <pxa href = " h t t p : //external_siteO4">External 4</ax/p> Site Banner Goes Here Content goes here. Исходный код страницы. Content goes here Content i| here. расположенные в основном тексте на странице. Content goes here.2. если имеется список ссылок на боковой панели или в специальном разделе на странице. Content goes here. какой текст заключать в теги-анкеры. 63.2. если встречаются внутристрочные ссылки или ссылки. куда введут ссылки. Content g :s here. . Текст ссылок сам сообщает об их назначении. ШМЕ 11 Рис. Content goes here. Content go1 .s here. Content goes here Content g< 13 here. состоящее в следующем: текст ссылки должен быть понятным и как можно более кратким. куда ведут ссылки. Content go :shere. поскольку в конечном итоге посетителям сообщается более или менее точно. Content g .2. Content goes here. Content goes here. Content goes here Content g s here.Строим Web-сайть 344 Выбор текста для ссылок также не составит труда. Здесь не возникает вопросов. Content goes here. Листинг 63. Для ссылок на боковых панелях не возникает вопросов о том. Но что происходит. как на рисунке 63. Вряд ли будет хорошим решением создание ссылки из целого абзаца. которые отображаются внутри основного текста на странице. Content goes here Content goes here. вид которой в браузере показан на рисунке 63. Content goi •shere. Content goes here Content g •s here. Однако при этом нарушается второе практическое правило для гиперссылок. как на странице 63. Content goes here Content goi •s here. Content goes here. Content go> •shere. Определение Внутристрочные ссылки (inline links) — это ссылки.

они по-прежнему должны иметь возможность понять. Это означает. • .5 стал еще лучше. 63. Please teel tree to download the ftiii review docum* Рис. Итак. куда ведут ссылки. куда ведут ссылки. величайшие почитатели печатного слова после Стивена Кинга (Stephen King). After all. У вас нет времени для этого Почему понятным и кратким? Потому что неясность и многословность противоречат сути Интернета. и при этом не требуется читать весь абзац.. Они сканируют. и не возникает сомнений. Слишком много текста бросается в глаза со страницы.4. иными словами. куда по ним можно попасть.ГЛАВА 63. Текст ссылки стал более понятным. если будут вникать во все подряд. Посетители вашего сайта вынуждены будут внимательно вчитываться в текст. nanoprn tests at several cyiicorj гас i alone found 3ir emissions up ^comfortable J описи air pollution is so severe witnm a ten : mile radius о cation rtoTonqef exists' We at Evtlcorp take txillution very seriously. но они не читают текст в Интернете. как правило.3. we nave recently revised toxic emissions at all tvlicorp We at Evllcorp humbly thank you. Возьмем рисунок 63. ясно. По-прежнему необходимо читать текст большого объема. что если посетители вашего сайта не читают какой-либо соседний текст (что вероятнее всего). Выбор подходящего текста для гиперссылки 345 Many of our Investors have expressed cor* environment enpiioh. что последняя ссылка направляет к краткому обзору документа. Очевидно. In no. что первая ссылка ведет к информации по каким-то исследованиям. они «тормозят» посетителей. Понятно. какие сведения следует ожидать на другом конце ссылки. Они надеются найти нужную информацию и попросту не смогут это сделать. Ссылки достаточно кратки и они сообщают. Даже если не читать соседний текст. и он сообщает о том. чтобы понять. ваши посетители. Они скользят. что по третьей ссылке выполняется переход к сведениям о пятилетних оценках. несколько раз. our Investors. for your support during triese turbulent times. Возникает ли у вас желание щелкнуть на них. borne recent <: into question. Здесь целые абзацы служат гиперссылками. Помните. что вторая ссылка указывает на сведения о собственном исследовании. возможно. Но текст ссылки все еще слишком многословен. Конечно же нет. how evil car a corporation be satd to be if it does not despoil the world's naturalbeauty for generations to come? Ш Цуе approach to B» problem. Дизайн Web-страницы на рисунке 63. как сделать ссылку понятной и краткой? Ключ к решению этой задачи — формирование текста ссылки из контекста.

foi youi support dunng these turbulent times. Если .iii. что они находятся на странице «Pollution» (загрязнение окружающей среды). Ваши пользователи могут быть нетерпеливыми. We at Evittorp take pollution very seriously. Some recent evidence suggests that world pollution Levels are decreasing overall. Random tests at several Evltcorp facilities in the Thltd World alone found air emissions up a comfortable 3 billion percent. our investors. к каким сведениям можно перейти. However.. но они неглупые люди. Random ThTrcTWorld Random tests tests at at several several Evilcorp Evilcorp faculties faculties in in trie trieThTrcTWorld e found air emissions up p a comfortable 3 billion ppercent. Such measures should address any inadvertent environmental protections that may have slipped our notice.. следуя по ссылкам Обратите внимание. Но текст ссьиюк по-прежнему слишком многословен Many of our investors have expressed concern that we are not polluting the environment enough. our internal study cf the situation calls many of these assertions into question. We at Evilcorp take pollution very seriously. how evil can a corporation be said to be if it does not despoil the world's natural beauty I .346 Строим Web-сайты Many of our investors nave expressed concern that we are not polluting the % environment enough. pledging to increase toxic emissions at all Evilcorp f» . In the event that air polluti i i fда r t акт d i to We at Evilcorp humbly thank you. while domest air pollution is so severe within a ten-mile radius of some Evilcorp plants perennial vegetation no longer exists.003%. We j t Evilcorp Lumbly thank /ou. Ссылки стали еще лучше. Please teel dee to download the full review document Puc. Two highly publicized studies now indicate that toxic emissions into the atmosphere are dowTTby as much as 0. the event that air pollution Is in fact decreasing. какие виды исследований присутствуют на связанной странице. Please fee! free to download the full review docume Puc. Air pollution seems especially at risk. 63. how evil cart a corporation be said to be if it does not despoil the world's natural beauty for generations to come? That is why we have decided to take s proactive approach to the problem. 63. Ссылки стали лучше. for your support during these turbulent times. while domestic di off some Evilcorp Eil pollution is so severe within a ten-mite radius plants that ennial vegetation no longer exists. ош investors. что текст первой ссылки не должен растолковывать. After all. Two now indicate trgtjoxtc emissions into i internal study of the situation calls many of these assertions question.4. более сфокусированными.4 Ъу another seventeen billion percent.5. • • m>is to come* That is why we have decided to take a proactive approach to the problem. Some recent evidence suggests that world pollution levels are decreasing overall.After all. Они кратки и сообщают посетителю. Им уже известно. Поставьте себя на их место. we have recently revised our five-year estimates. Air pollution seems especially at risk.

и не один из них не является хорошо разработанной гиперссылкой. позволяет ясно представить. Выбор подходящего текста для гиперссылки 347 бы вы попробовали догадаться. точки или запятые. Все ссылки за исключением первой являются краткими. С точки зрения краткости. что они и делают. что находится на связанной странице. предоставляет четыре варианта этой непревзойденной классики. помогая различать эти две ссылки. как правило. что при щелчке на ссылке будет что-то загружаться. В некоторых случаях вы. что это исследования о загрязнении окружающей среды. если исходить из контекста. включающая download (загрузку). что ссылки ведут на разные страницы. что практически бесполезен. и. как круглые скобки.6.ГЛАВА 63. Наконец. пришли бы к выводу. возможно. Вместо этого они . Слова «studies» и «study» не так уж сильно различаются между собой. куда они ведут? Ясно ли из их текста. компанией Evilcorp. Часто задаваемые вопросы А как насчет знаков препинания? Являются ли они частью текста гиперссылки? Текст внутристрочной ссылки обычно не включает начальные и конечные знаки препинания такие. но понятны ли они? Имеют ли они смысл. чего следует ожидать: краткого обзора документа. Обратите также внимание. Гиперссылка на странице «Pollution» (загрязнение окружающей среды). о случаях загрязнения. Почему нет? Потому что download (загрузка) не имеет смысла. как оказывается. вероятно. но этот термин настолько широк. Но гиперссылка на странице «Pollution» (загрязнение окружающей среды). что они указывают на одну и ту же страницу. что вторая ссылка читается как «internal study» (собственное исследование). то. посетители ожидают. показанной на рисунке 63. по-видимому. В свою очередь. по-видимому. в последней ссылке не должно употребляться слово «download» (загрузка). где выделенные слова и фразы. были бы абсолютно правы. были бы нравы. поэтому некоторые посетители могут предположить. И в заключение этой главы рассмотрим один более чем уместный вопрос: как насчет использования сверхпопулярной ссылки «Click Here» (Щелкните здесь)? Дизайн Web-страницы. ни о чем не говорит. включают начальные и конечные знаки препинания. Но здесь слово «study» слишком похоже на слово «studies» первой ссылки. Фраза «internal study» является достаточно краткой и резко контрастирует с первой ссылкой. Сообщают ли ссылки. которая обещает information (информацию). состоящая из фразы «review document». за исключением того. что во второй ссылке следовало бы опустить слово «internal» и оставить только «study». связанное с загрязнением окружающей среды. какие сведения следует ожидать на другом конце ссылки? Наиболее удачной является последняя ссылка. тогда как первая ссылка — «studies» (исследования). если исходить из контекста? Есть один только способ проверить это: очень бегло просмотреть страницу. которое может ожидаться некоторыми. подготовленного. Этот общий стиль полностью противоположен правилам печатных изданий. какие виды исследований ожидают вас на другом конце ссылки. можно было бы предположить. Они ничего не сообщают посетителям о том. Ссылки «Click Here» (Щелкните здесь) читаются как команды.

Please . our investors. Ciick here for more information. как щелкать. After all. Air pollution seems especially at risk. они смогут догадаться. а об этом как раз ссылка «Click Here» (Щелкните здесь) и не сообщает. она здесь не работает. in the event that air pollution is in fact decreasing. He важно. В конце концов. Click here for more information Рис. for your support during these turbulent times. От вас же они хотят узнать. Click here for more However. если исходить из контекста Посетители вашего сайта знают. кто научил вас. что представлено несколько вариантов популярной ссылки «Click Here » (щелкните здесь).fmg® 100% lany of our investors have expressed concern that we are not polluting the nvironment enough. our internal study of the situation calls many of these assertions into question.ee! free to download the fijtt review document. И если они не знают. Two highly publicized studies now indicate that toxic emissions Into the atmosphere are down by as iruch as 0. 63. we have recently revised our five-year estimates. Но посетители уже знают. while domestic ait pollution Is so severe within a ten-mile radius of some Evilcorp plants that perennial vegetation no kjnger exists.348 Строим Web-сайты указывают посетителям. our notice. как работа > ' гиперссылки.6. почему надо щелкать. how evil can a corporation be said to be if it cioes not despoil the world's natural beauty for generations to come? ' That is why we have decided to take a proactive approach to the problem. Им уже известно. что надо делать. piedg ng to increase toxic emissions at all Evlkorp facilities by another seventeer billion percent. где щелкать. как надо щелкать? Э 6306.003%. Эта ссылка не несет никакого смысла. We at EvHcorp take pollution very seriously. Such measures should address any inadvertent environmental protections that may have slipped * mation. Some recent evidence suggests that world pollution •veis are decreasing overall. Ctick here for r informal We at Evilcofp humbly thank you. Random tests at several Evllcorp facilities in the Third World alone found air emissions up a comfortable 3 billion percent. .

и они знают.htm" Hac">ABOUT US</a> I title="Перейти на страницу О . если разъясните точно.. когда вы наводите указатель мыши на изображение. представить изображение! не видя его. давая возможность любому. Вам известно из главы 34. <а href=".ГЛАВА 6 4 ./products/products. Поэтому вы улучшите доступность своего сайта для разных категорий посетителей. строке навигации или на панели навигации внизу страницы.htm" title="Перейти на страницу Усnyrn">SERVICES</a> I <a href=". Такой же принцип действует для текстовых гиперссылок. что вы. Тег-анкер не содержит атрибута a l t . появляется всплывающая подсказка. которые находятся вне блока текста.. подчеркивания или положения ссылок на странице относительно остального содержимого. кому недоступны достоинства синего цвета. Текст описывает содержание изображения. что находится в атрибуте a l t тега img: <img s r c = " h o r s e . Но когда вы отделяете список ссылок на боковой панели. как дизайнер. что надо делать./services/services. но для него есть атрибут t i t l e . полностью управляете содержанием всплывающей подсказки.htm" цу ">НОМЕ</а> I title="Перейти <а href=". Зрячие посетители просто обращают внимание на синий цвет текста ссылки и на подчеркивание. что эти ссылки делают. j p g " width="100" height="50" alt="Антикварная качающаяся лошадка из красного дерева с латунным колокольчиком на шее " > Добавление текста в атрибут a l t для изображения помогает сделать его более доступным для людей с дефектами зрения. который выполняет ту же функцию. кто слышит текст из атрибута a l t . не задумываясь об этом. особенно для тех.htm" npoflyKTbi">PRODUCTS</a> I на начальную title="Перейти на странистраницу <а href=". поскольку браузер отображает то./index./aboutus/aboutus.. назначение этих ссылок может быть неясным для тех. Создание Всплывающих подсказок для гиперссылок Время от времени.. содержащая дополнительные сведения об изображении. размещенное на Web-странице.

включают атрибут t i t l e ссылки в свои выходные данные. Совет В атрибуте title ссылки не требуется сообщать Click here (Щелкните здесь). в предложении «Click here to go to the Product page» (Щелкните здесь. Это приятный момент для зрячих посетителей. Другими словами. не указывайте для атрибута title ссылки значение Home Page (Начальная страница). . При наведении указателя мыши на ссылку текст. Лучшим вариантом будет Go to home page (Переход на начальную страницу). куда ведут ссылки. содержащийся в атрибуте t i t l e . Щелканье понятно само собой. такие.Строим Web-сайты 350 Совет Чтобы сделать всплывающую подсказку максимально доступной. Более важно. Это противоречит назначению подсказки. как. поэтому люди с дефектами зрения будут ясно представлять. куда ведет ссылка. чтобы перейти на страницу Продукты). например. Просто сообщите «Go to the Product page» (Переход на страницу Продукты). как устройства чтения с экрана. отображается как всплывающая подсказка. не ограничивайтесь простым повторением текста ссылки. Лучше сообщите посетителю. что инструменты специального доступа.

открытие нового окна браузера не так уж и плохо. изменяются их URL-адреса или на сайтах используются методы. кто ненавидит всплывающие окна с такой силой. Просто добавьте атрибут t a r g e t в тег-анкер и установите для этого атрибута значение _blank. скорее всего. которые отключают кнопку Back (Назад) браузера. что внешние сайты регулярно исчезают. что сам Фрейд (Freud) затруднился бы объяснить причины подобной ненависти. когда избавление от бесполезного сайта сводится к простому закрытию нового окна браузера. Это обычно те. Открытие нового окна браузера У Когда ссылка указывает на внешний сайт. Открытие нового окна браузера очень просто реализовать для любой ссылки. Вывод посетителям сообщения об ошибке «File Not Found» (Файл не найден) менее всего выглядит как ошибка. Если новое окно появляется для каждой страницы на вашем сайте. Открытие нового окна браузера подходит лучше всего для внешних ссылок и не уместно для внутренних ссылок.ГЛАВА 65. то посетители. Совет Помните. чтобы при щелчке на ссылке открывалось новое окно браузера. Некоторые разработчики Web-сайтов насмехаются над этой стратегией. которая возможно связана с беспорядком на рабочем столе. не обязательно это делать во всех возможных случаях. что если вы умеете что-нибудь. как может показаться на первый взгляд. На самом деле в некоторых кругах это считается любезностью. охотно пополнят ряды ненавистников открывания новых окон. как в следующем примере: <а h r e f = " h t t p : / / e x t e r n a l s i t e / " target="_blank">BHemHMU сайт</а> . общепринято. Учитывая. при этом в исходном окне остается открытой страница с исходной ссылкой. Внешний сайт загружается в новое окно.

Вверху страницы содержатся часто задаваемые вопросы (EAQ — Frequently Asked Questions). как в следующем примере: <а name="question01"x/a> . он действует как источник ссылки. он функционирует как пункт назначения ссылки. Пункт назначения (destination) ссылки — это страница. тег-анкер можно применить для задания местоположения. Но когда тег-анкер содержит атрибут name. просто поместите тег-анкер точно в том месте. Задание именованных анкероВ Чтобы установить анкер на странице. Определение Источник (source) ссылки — это элемент.ГЛАВА 6 6 . которая загружается в окно браузера. которые являются анкерами hre f. Не забудьте указать атрибут name вместо атриб^/та href. что выполняет две разные функции в HTML. тег-анкер можно использовать для связи с другой страницей: <а href="anotherpage.htm">Переход на другую страницу</а> Определение ' Именованный анкер (named anchor) — это местоположение на Web-странице. или именованного анкера. Такое деление часто встречается на страницах вопросов и ответов. Ответы на вопросы следуют дальше. который посетитель щелкает для перехода на другую страницу. использование именованных анкеров Тег-анкер необычен тем. к которому осуществляется привязка: <а пате="привязатьздесь"х/а> Способ функционирования тега-анкера зависит от его атрибутов. С одной стороны. на котором посетитель щелкает. С другой стороны. Когда тег-анкер содержит атрибут hr e f. Одно из наиболее распространенных применений этого метода — деление длинной Web-страницы на несколько разделов. или элемент. а не как источник. каждый со своим тегом именованного анкера. или местоположение. куда должен переходить браузер. чтобы перейти на другую страницу. к которому можно привязать ссылку. чтобы тег функционировал как пункт назначения. которое отображается в браузере после щелчка посетителя на ссылке.

Привяжите ссылку к одному из анкеров. сопровождаемый именем анкера. но браузер знает об их существовании.</p> Как показано на рисунке 66.1.</p> <a name="guestion02"x/a> <pxstrong>What i s the meaning of money?</strongx/p> <p>The meaning of money i s time. Именованные анкеры не отображаются в окне браузера. только этот тег должен быть анкером-источником. What is the пнеагшд of money? What is the meaning of time? Answers What is the meaning of life? The meaning of life is money. Fife Edit View Ffivorftes Tods НЫр FAQs 1 "What is the mealing of life? 2 3. What is the meaning of time? The meaning of tune is life. Они не являются видимыми элементами.1. Использование именованных анкеров 353 <pxstrong>What i s the meaning of life?</strongx/p> <p>The meaning of l i f e i s money. с которым может устанавливаться связь ссылки. как в следующем примере: . и браузер перейдет точно в местоположение анкера Привязка к именованным анкерам Чтобы привязать ссылку к именованному анкеру. What is the meaning of money? The meaning of money is time.</p> <a name="question03"x/a> <pxstrong>What is the meaning of time?</strongx/p> <p>The meaning of time i s life. а не анкером-пунктом назначения. В атрибуте h r e f анкера-источника введите знак порядкового номера (#). необходим еще один тег-анкер. 66. 'j Рис. к которому требуется привязаться. Они просто предоставляют конкретное место.ГЛАВА 66. сами именованные анкеры не отображаются в окне браузера.

Просто добавьте код именованного анкера в конец пути.htm#newreleases">New Releases</a> С помощью этого смешанного пути браузер находит страницу movie. что эти ссылки ведут к именованным анкерам на той же странице. то как браузер показывает./movies/movies. который на . Причина в том. Совет Хорошим правилом является включение ссылки «Back To Тор» (Назад вверх) где-нибудь после именованного анкера. он прокручивает экран так. Единственное отличие состоит в том.(дится на какой-нибудь другой странице? Нет проблем.Строим Web-сайты 354 •clixa href = "#question01">What is the meaning of life?</ax/li> •clixa href = "#question02">What is the meaning of money ?</ax/li> <lixa href = "#question03">What is the meaning of time?</ax/li> Часто задаваемые вопросы Если именованные анкеры невидимы. Эти теги-анкеры отображаются в браузере как обычные гиперссылки. что посетитель перешел на один из них? Обычно когда браузер переходит на именованный анкер. Затем после ответов на все вопросы добавьте следующий код для получения требуемого эффекта: <а href="#top">Ha3aM вверх</а> Что делать. что они и есть обычные гииерссылки.htm. что вы разрабатываете страницу «Часто задаваемые вопросы». В этом случае посетитель может быстро и легко вернуться к источнику ссылки. чтобы анкер находился вверху. а затем переходит на данной странице к именованному анкеру newreleases. Непосредственно до списка вопросов вставьте именованный маркер с именем top. а не вверх какой-нибудь другой страницы. . Предположим в качестве примера. если требуется привязать ссылку к именованному анкеру.. как в следующем коде: <а href=". Возврат в исходное место можно реализовать с помощью еще одного именованного маркера.

Создание ссылок электронной почты Ссылка электронной почты в действительности не является ссылкой. Вместо него присваивается специальное значение. если хотите. сопроводив его двоеточием (:) и своим полным электронным адресом. 12' . Однако вместо направления браузера на другую страницу или на именованный анкер открывается пустое окно электронной почты. является адресом получателя электронного сообщения. но значением этого атрибута является не путь. Текст. укажите в атрибуте href значение mailto. который следует за mailto. если они не будут работать и с вашими программами. Таким образом. хотя по внешнему виду похожа на нее и использует тег-анкер. Ссылка электронной почты выглядит подобно следующему примеру: <а href-"mailto:name@emailaddress">IIomnMTe мне письмо</а> Тег-анкер создает ссылку. Определение При щелчке на ссылке электронной почты (email link) открывается пустое окно электронной почты. Совет Можно также указать тему сообщения (subject) и адрес для копии сообщения (СС): <& href'="mail to:name@emai1 address?subject=Mail&cc=another@emailaddress"'>Пошлите мне письмо</а> Однако темы и адреса для копий сообщений не работают с некоторыми приложениями электронной почты. называемое по очевидным причинам mailto (почта). как и в случае обычной гиперссылки. Им используется также атрибут href. поэтому не удивляйтесь. Используйте ссылки электронной почты на своем сайте как способ связи посетителей с вами. чтобы электронное сообщение пришло на ваш личный электронный адрес.ГЛАВА 67.

главу 62). тем самым подкрепляется идея о теш. не адрес самой нелюбимой политической организации. вероятно. то ссылка электронной почты будет отличным кандидатом. Окрашивание данной ссылки в другой цвет помогает выделить ее среди обычных гинерссылок на странице. что вы об этом не читали в данной главе. вы могли бы создать провокационную Web-страницу. добавить ссылку электронной почты и направить пачки пышущих ненавистью сообщений.356 Строим Web-сайты Если вы ищите предлог для изменения цвета одной гиперссылки на странице без воздействия на стандартные цвета (см. которые. Если вам не терпится поозорничать. Но считайте. что адрес электронной почты в ссылке электронной почты должен быть обязательно вашим. что ссылка электронной почты выполняет другую функцию. вызовет ваша страничка. . Часто задаваемые вопросы Я участвую в антиправительственном заговоре. Как ссылки электронной почты могут помочь мне? Никто не говорит.

ЧАСТЬ 6. Формы Работа с элементами управления форм Применение стилей к элементам управления текстом Проверка достоверности входных данных форм Навигация с помощью клавиши Tab .изменение порядка переходов Работа с наборами полей Работа с метками .

Большая часть времени разработки эффективной формы уходит на определение различных элементов управления и выяснение того.ГЛАВА 68. на которых вы щелкаете кнопками мыши и в которые вводите текст на форме. 68.это неболь • шие фрагменты формы. называются элементами управления и иногда также упоминаются как поля форм или объекты форм. В последующих разделах данной главы рассматривается каждый из этих элементов управления. В таблице 68. Определение Элементы управления (Widgets).1 приводится список HTML-элементов управления на тот случай. также называемые полями формы (Form fields) или объектами формы (Form objects).<input ления в форме к их состоя шям по умолчанию type="reset"> type="image"> . .1. если вы забыли некоторые из них.- Флажок Выбор любых вариантов и 3 числа доступных <input box" > type="check- Поле файла Присоединение внешнего файла к данным формы <input type="file"> Скрытое поле Хранение скрытых данные <input type="hidden"> Поле изображения Отправка данных формы и а Web-сервер <input Список Выбор любых вариантов и 3 числа доступных (но обыч •ю только одного) <select size="x"x/select> Меню Выбор любых вариантов и 3 числа доступных (но обыч ю только одного) <select></select> Поле пароля Ввод пароля <input type="password":> Переключатель Выбор одного из нескольк IX вариантов <input type="radio"> Кнопка «Сброс» Возврат всех элементов уп эав. Табл. на которых щелкают кнопками мыши и в которые вводят текст на форме. HTML-элементы управления Элемент управления Назначение Тег Кнопка (общая) Запуск функции <input type= "button". какие функции выполняются каждым из элементов. Работа с элементами управления форм Небольшие элементы.

а атрибут value содержит метку. которая запускается. 68. Значением события onClick является имя функции Javascript. которые могут выбираться с помощью щелчка кнопкой мыши на них. Необходимо специально запрограммировать эти кнопки на выполнение нужных вам функций.1. . в котором указывается имя запускаемой функции.359 ГЛАВА 68. 68. но она ничего не выполняет до тех пор.1. когда пользователь щелкает на кнопке."> </form> Рис. что обычно реализуется с помощью запуска функции JavaScript. пока вы не добавите в ее тег событие onCl i ck Атрибут name тега input для кнопки идентифицирует кнопку.1 <form> <input type=button" name="totalButton" value="Calculate Total" onClick="doTotal(). Но когда посетитель щелкает на этих кнопках. Исходный код страницы. Тег input кнопки принимает событие onClick. рис. Работа с элементами управления форм Элемент управления Назначение Тег Кнопка «Передача» Отправка данных формы на Web-сервер <input Текстовая область Ввод нескольких строк текста < t e x t a r e a x / t e x t a r e a > Текстовое поле Ввод одиночной строки текста <input type="submit"> type="text"> Работа с кнопками общего назначения КНОПКИ общего назначения (см.это элементы графического интерфейса. вид которой в браузере показан на рисунке 68.1) . то в отличие от кнопок отправки и сброса ничего не происходит. Листинг 68. которая отображается на кнопке. Кнопка общего назначения активизируется с помощью щелчка кнопкой мыши на ней.

File £d!t tfew Favorites Tools ijelp Select the newsletters you would like to receive D News • Sports • Business П Entertainment Q Humor Puc.для этих случаев лучше подходят переключатели. вид которой в браузере показан на рисунке 68.2. Исходный код страницы. требуемое количество или ни одного. из которых посетитель может выбрать один.2. 68.Строим Web-сайты 360 Работа с флаЖками Флажки идеально подходят для относительно небольшого числа вариантов. все. как на рисунке 68. Используйте флажки. когда имеется небольшое число вариантов.2. где посетитель должен выбрать один и только один вариант . Не используйте флажки для ситуаций. type="checkbox" name="businessCheck" value="yes" .2 <form> <table> <tr> <td>Select the newsletters you would like to receive:</td> </tr> <tr> <tdxinput >News</td> type="checkbox" name="newsCheck" value = "ye£i" type="checkbox" name="sportsCheck" value="yes" </tr> <tr> <tdxinput >Sports</td> </tr> <tr> <tdxinput >Business</td> . из которых посетитель может выбрать требуемое число вариантов (либо даже вообще не выбирать) Листинг 68.

что вы хотите послать на Web-сервер.ГЛАВА 68. которые передаются формой. если посетитель устанавливает флажки News. атрибуту checked не присваивается значение. Чтобы флажок был предустановленным при загрузке формы. Он не включает их в отправляемые данные. как на рисунке 68. При необходимости можно передавать разные значения для каждого значка.1. Часто задаваемые вопросы ЧТО происходит со сброшенными флажками? Браузер игнорирует их. Работа с элементами управления форм 361 </tr> <tr> <tdxinput type="checkbox" name="entertainmentCheck" value= "yes">Entertainment</td> </tr> <tr> <td><input >Humor</td> type="checkbox" name="humorCheck" value="yes" </tr> </table> </form> Как и для кнопок общего назначения. Атрибут value содержит данные. формой отправляются на Web-сервер следующие данные: newsCheck=yes sportsCheck=yes businessCheck=yes Значения не обязательно должны быть одинаковыми для всех флажков. Таким способом . если посетитель устанавливает этот флажок. Таким образом. Все зависит от того. добавьте атрибут checked в тег input флажка: <input type="checkbox" name="news" value="yes" checked> Как видите. для флажка атрибут name тега input предоставляет имя данного конкретного флажка. Работа с полями файлов ПОЛЯ файлов ПОЗВОЛЯЮТ посетителям сайта прикреплять компьютерные файлы с их локальных компьютеров к форме отправки (Submission form). Sports и Business.

посетитель может видеть 50 знаков в поле. Исходный код страницы. звуковые файлы и текстовые документы. и поле прекращает принимать вводимые данные после набора 70 знаков.3.3. поле файла состоит из двух частей: самого поля и кнопки Browse (Обзор).3 при значении атрибута size. которое может принять поле.3 <form> <input type="file" name="ImageFile" size="50" maxlength="70"> </form> Fte Edit Wew FavCTftss Tools beb Рис. 68. загружаемым на удаленный компьютер? Поля файлов могут быть сложны для обработки на сервере. Как видно на рисунке 68. В примере на рисунке 68. Разработчик базы данных должен подготовить специальный столбец для принятия данных файла вместо текста или чисел. равном 70. тогда как атрибут maxlength определяет максимальное число знаков. Атрибут s i z e задаст длину поля в знаках. передаваемых в обычных случаях. Обычно формы такого типа поступают непосредственно в базу данных. как файлы изображений. а не в пикселах. равном 50.3. Используйте поля файлов.Строим Web-сайты 362 посетители могут загружать на Web-сервер такие объекты. Листинг 68. . Вот почему поле файла включает кнопку Browse (Обзор I. и значении атрибута maxlength. вид которой в браузере показан на рисунке 68. Часто задаваемые вопросы ЧТО происходит с файлом. когда требуется предоставить посетителям своего сайта возможность загрузки файлов с их локальных компьютеров на Web-cepeep Повторюсь еще раз: атрибут name идентифицирует поле файла. Для корректной работы внутри поля этого элемента управления должен находиться допустимый путь.

но посетитель не видит их. После этого браузер автоматически вводит правильный путь.ГЛАВА 68. если сайт содержит несколько форм более или менее одинаковых по виду. но посетитель обычно не знает об этом. поскольку поле невидимо Дизайнеры иногда используют скрытые поля для озорства. Листинг 68. 68. поскольку скрытое поле. как показано на рисунке 68. полностью невидимо на странице. С этим придется смириться. Могу я изменить ее? Нет. Работа со скрытыми полями Данные в скрытом поле передаются на Web-сервер вместе с остальной формой.htm"> </form> Puc. .4. но обычно эти поля совсем безобидны. который будет загружаться на Web-сервер. В примере на рисунке 68.4 скрытое поле содержит имя страницы. Исходный код страницы.4. предоставляющий посетителю возможность перехода к требуемому файлу.4. представляющей форму. вид которой в браузере показан на рисунке 68. Работа с элементами управления форм 363 При щелчке на этой кнопке открывается диалог. которое полезно знать. HTML не позволяет изменять название кнопки или делать ее невидимой. Скрытое поле содержит данные формы.4 <form> <input type="hidden" name="referringPage" value="newsletter. Часто задаваемые вопросы Мне не нравится кнопка Browse (Обзор).

что можно использовать любой файл изображения для передачи формы.gif" </form> File Edit tfew Fgrorrtes Tools Puc. вид которой в браузере показан на рисунке 68. Используйте поле изображения вместо стандартной кнопки Submit (Передать) . Работа с полями изображений Поле изображения . т.5.е. Web-сервер получает код. и работает точно так же.Строим Web-сайты 364 Хотя посетитель не видит данные в скрытом поле. 68.5 <form> <input type="image" width="20" height="20"> name="goButton" src="images/go. управляемым щелчками кнопки мыши. Пример изображения показан на рисунке 68.5. Исходный код страницы. Листинг 68.это графическая замена стандартной HTML-кнопки Submit (Г & редать). Поскольку скрытые поля невидимы. При желании поставляемый с браузером элемент управления в виде стандартной и некрасивой кнопки можно заменить на приемлемое графическое изображение. Поле изображения является элементом графического интерфейса. Преимущество замены кнопки Submit (Передать) на поле изображения заключается в том.htm Часто задаваемые вопросы Могут ли посетители моего сайта изменять содержимое скрытого поля? Непосредственно изменять не могут. Однако с помощью функций JavaScript достаточно просто обновить значение скрытого поля. подобный следующему: referringPage=newsletter. посетитель не может редактировать или изменять их значения. как кнопка Submit (Передать). по щелчку на поле изображения данные формы пересылаются на Web-сервер.5.

/* Замените <form>. Заключите в теги-анкеры изображение. "ximg src = "images/reset . а затем добавьте простую функцию JavaScript для дублирования поведения кнопки Reset (сброс).gif' width="60" height="40" а1Ь="Щелкните. Например.reset(). Но пусть это вас не останавливает. чтобы установить форму в исходное состояние. как в теге img. 4 Замена кнопки Reset (Сброс) Поля изображений всегда передают данные формы.ГЛАВА 68."></а> </body> .formname. не существует способа изменения поля изображения так. Работа с элементами управления форм 365 Атрибут scr содержит путь к графическому файлу поля изображения. --> <body> <а href = " javascript :doReset (). чтобы оно функционировало как кнопка Reset (Сброс). Здесь приводится код полного сценария плюс образец ссылки: <head> <script language="JavaScript"> function doResetO { document. */ formname (имя формы) значением атрибута name тега </script> </head> <!-- Далее следует тело страницы. а атрибуты width и height задают ширину и высоту изображения точно так же. Воспользуйтесь обычным тегом изображения. чтобы оно управлялось посредством щелчков кнопкой мыши.

Если список содержит больше вариантов. */ </script> </head> <body> <a href="javascript:вашаФункция(). из которых посетитель может делать свой выбор. В списке атрибут s i z e тега < s e l e c t > определяет число отображаемых вариантов."><img src="images/button. чтобы запустить сценарий. "></а> </body> Работа со списками СПИСОК представляет несколько вариантов. браузером добавляется полоса прокрутки с правой стороны списка. так как списки позволяют боле оптимально использовать площадь Web-страницы.gif" width="60" height="40" alt="Щелкните.6. . похожим на следующий пример: <head> <script language="JavaScript"> function вашаФункция() { /* Поместите здесь свою функцию JavaScript. Если число доступных вариантов вы бора достаточно большое. чем это число. Попробуйте воспользоваться кодом. а не переключателей или флажков.366 Строим Web-сайты Замена кнопки общего назначения Подобным образом изображение можно использовать для запуска функции JavaScript и для замены элемента управления в виде кнопки общего назначения. то следует отдать предпочтение использованию списков. Пример списка показан на рисунке 68.

6. Исходный код страницы. вид которой в браузере показан на рисунке 68. 68. Упорядочивание большого количества вариантов выбора в виде списка Листинг 68.6.6 <form> <table> <tr> <td>Select the newsletter you would like to receive:</td> </tr> <tr> <tdxselect name="newsletterList" size="5"> <option value="news">News</option> <option value="sports">Sports</option> <option value="business">Business</option> <option value="entertainment">Entertainment</option> <opt ion value="humor">Humor</option> ' > <option value="style">Style</option> <option value="travel">Travel</option> <option value="science">Science</option> <option value="culture">Culture</option> </selectx/td> </tr> </table> </form> .ГЛАВА 68. Работа с элементами управления форм Fie 367 14Л ^iew Select the newsletter you would like to receive: NMt I Sports Business Entertainment i Humor • Puc.

7 <form> <table> <tr> . По умолчанию Internet Explorer выбирает первый вариант. Он просто присутствует или отсутствует в теге. вид которой в браузере показан на рисунке 68. атрибут m u l t i p l e не имеет значения. Таким образом. используется для представления большого числа вариантов выбора. Листинг 68.последний. Код разметки практически такой же. Web-сервер получает нечто. вы захотите сделать некоторые варианты предварительно выбранными: <option value="news" selected>News</option> <option v a l u e = " s p o r t s " <option value="business" selected>Sports</option> selected>Business</option> В противном случае браузер принимает один предварительно выбранный вариант и игнорирует остальные. как на рисунке 68.7. возможно. похожее на следующую строк)' кода: • newsletterList=culture Чтобы разрешить посетителям выбор нескольких элементов списка.Строим Web-сайть 368 Каждый вариант в списке получает свой собственный тег <option>. причем меню. как и списки. добавьте в его тег атрибут selected: <option value="news" selected>News</option> Если разрабатываемый список допускает несколько вариантов выбора. которые Web-сервер получает при отправке формы посетителем. если посетитель выбирает получение бюллетеня «Culture» (Культура). добавьте в тег <select> атрибут multiple: <select name="newsletterList" s i z e = " 5 " multiple> Как и атрибут checked. что доступные варианты отображаются в виде открывающегося списка. Основное отличие состоит в том. Часто задаваемые вопросы Как выбрать из списка несколько вариантов? Для выбора из списка нескольких вариантов необходимо держать нажатой клавишу Ctrl (Windows) или Command (Mac). Чтобы задать предварительный выбор элемента списка. Атрибут value тега <option> содержит данные. тог да как Netscape .7. Работа с меню Меню во многом похоже на список. Исходный код страницы.

и вы увидите.:.. - Рис.. Используйте меню вместо списка.7. 68. что разница между меню и списком состоит в отсутствии атрибута s i z e в теге s e l e c t . если отдаете предпочтение компактному виду меню Внимательно посмотрите на исходный код Web-страницы. Работа с элементами управления форм 369 <td>Select the newsletter you would like to receive:</td> </tr> <tr> <tdxselect name="select"> <option value="news" selected>News</option> <option value="sports">Sports</option> <option value="business">Business</option> <option value="entertainment">Entertainment</option> <option value="humor">Humor</option> <option value="style">Style</option> <option value="travel">Travel</option> <option value="science">Science</option> <option value="culture">Culture</option> </selectx/td> </tr> </table> </form> Select the newsletter you would like to receive: [Newr.ГЛАВА 68. показанной на рисунке 68. ..7.

сделав это. Исходный код страницы. .8. вид которой в браузере показан на рисунке 68. и данные. Это означает. Работа с полями паролей ПОЛЯ паролей похожи на текстовые поля. ключи. Кроме того. Обычно эти типы полей используются для принятия паролей или любых других входных данных. чтобы в поле пароля загружалось предустан