Table Of ContentPri nci ples
of Web
Des~~n
Edition Joel
Thiгd Ьу Sklaг
ТНО~ОNСОURSЕТЕCНNОLОGУ
Australia • Canada • мexico • Singapore • Spain
United I<ingdom • United States
)~жоел Скляр
Актуальные принципы
WеЬсд~зайна
Москва
Иэдателктво «ЭКСМQ»
2007
\ Ю< 004.738.5
1.1. К 32.973.26-018.2
С43
Перевод с английс"Оro и редакция АА. Борисенко
ВыпускаЮЩIIЙ редаКТор В.В. Александров
ClcJulpДж.
(' 1:i Актуальные прииц1fпы Web-дизайна / Дж. Скляр; [пер. с
англ., ред. А.Л. Борисеtlко). - М.: Эксмо, 2007. - 464 с.: ил. -
(Мастер-класс).
IS8N 0-619-21666·2 (англ.)
ISBN 978-5-699·21755-7 (рус.)
эта КНИга IIOМОЖет вам спланировать И разработать качественные
WеЬ·узлы с удобной навигаlPlей.построснныс с раЦИОНaJ\ЬНЫ .. использовани
ем графики. текста н ПaJ\итрrl ЦветоВ. Вы наУЧltreCь соодавать Wcb-уз.1Ы. посе
mтели которых смогут лсП<0 н быстро наХОДIIТЬ нeotiходимуlO им информа
циlO - независимо от типа обоэреватeJUI. СКОРОСТИ соедаНСIIИII 11 платформы
компьютера. Советы. привеленные В этоА книге. помогут вам с делать содерJICИ
мое узла более иитересиым и визуально ПРИВJIекательным. В даllНУЮ КИИГУ
ВКJJlOчсно описание каскаднЫХ таблиц cmлеА (CSS - Cascading Style Sh~ts).
этот мощный IIЗЫК ОФОРМJIСНИJI СТIIJ\Я В сочетании с 11ЗЫКОМ XHTML поможет
вам создать ПРИВJIекательнj>lС и эффектные WСЬ-страницы. ИСIIOЛЬЭО8аИие
СSS-cmлей позволит дocти4fЬ высоких результатов. поэтому их НЗ~"lение ЯВ
ляетсЯ 3aJ\OmM успеха для сРЭдаТeJJей cOBpeMeHlIblx WСЬ-УЭЛОВ.
)' дк 004.738.5
66К 32.973.26-018.2
Все названия програм,.ных ПРОДУКТОВ ЯВ.1ЯЮТСЯ эареПIСТРИРОванными
торmвыми марками с~ующих фирм.
Никакая часть настоящеm издания НlI В каких ЦС,1ЯХ не может быть воспро
изведена В какой бы то IIИ БЫЛО форме и какими бы то 1111 БLIЛО средствами. будь
то электроННЫС IL1 И механичt(:КИе, ВКJ\JOЧ3Я фотокопирование и запись на .aaпurr
НbIЙ IIОСIПeJlь, если иа это не1 ПИСьмен/10m раэреШt'tIия ILшате.1ЬСТва .Эксмо •.
с Copyricbt с 2006. 1bomsoп ~
ISBN 0-619-21666-2 ( .....J I.) ТechnoIogy •• division ol1Ъcмnsoa LearuiD&.1Dc.
I~BN 978-5-699-21755-7 (рус.) С 000 .Иua~ .Эхсмо •• 2007
Содержание
Введение ............................................................................. 17
Структура книги ...........................................................................1 8
Соглашения, используемые в книге ............................................ 19
Глава 1. 3накомство с WеЬ-диэайном ....................... 23
Текущее состояние языка HTML ................................................. 23
HTML: прошлое и настоящее .............................................................2 3
HTML и консорциум World Wide Web .............................................. 24
Ограничения в HTML ......................................................................... 25
Необходимость таблиц стилей ........................................................ 26
Предоставление информации с помощью гипертекста .................. 28
Переход от HTML к XHTML ......................................................... 28
Краткое введение в XML .................................................................. 29
Преимущества перехода к XHTML ................................................... 30
Синтаксические правила языка XHTML ............................................ 31
3начения атрибутов долж.ны заключаться в кавычки ...................... 33
Необходимость таблиц стилей ........................................................ 34
Переход от HTML к XHTML ............................................................... 35
Выбираем HTML-редаКТор ............................................................... 36
Переменные в Web-дизайне ...................................................... 37
Проблемы совместимости обозревателей ...................................... 38
Создание страниц для разных обозревателей ................................. 40
Решение проблемы обозревателей ................................................. 42
Разница в скоростях соединения ................................................ 42
Использование кеша для уменьшения времени загрузки .............. 44
Создание кода для нескольких разрешений экрана .................. 44
Фиксированный дизайн ................................................................... 45
Гибкий дизайн .................................................................................. 46
центрированный дизайн .................................................................. 48
Проблемы операционных систем .............................................. 49
Что дальше .............. :. .................................................................. 50
Вопросы и задания ...................................................................... 51
Упражнения ................................................................................ 52
Бизнес-проект ............................................................................. 55
План проекта .................................................................................... 56
I I
1. Содержание
Глава 2. Принципы создания дизайна
Web-узла ........................................................... 59
Создание дизайна под среду компьютера ................................. 59
Создаваемое впечатление ................................................................ 60
Кросс-платформенный дизайн ........................................................ 60
Создавайте дизайн для низкоскоростных каналов ......................... 62
Спланируйте простой доступ к информации ................................... 63
Спланируйте удобное представление информации ....................... 63
Создавайте цельный дизайн узла .............................................. 64
Спланируйте плавные переходы ...................................................... 66
Для создания визуальной структуры используйте сетку ................. 68
Пользуйтесь активными пустыми полями ....................................... 69
Разрабатывайте дизайн ДЛЯ пользователя ................................ 70
Дизайн для удобного использования ............................................... 73
Дизайн для положения ...................................................................... 75
Управляйте вниманием пользователя .............................................. 76
Придерживайтесь плоской иерархии ............................................... 79
Воспользуйтесь силой гипертекстовых ссылок ................................ 80
Сколько информации должно быть ................................................ 82
Соэдание доступного дизайна ......................................................... 83
Дизайн экрана ............................................................................ 86
Преобразование содержимого к электронному виду ............... 86
Что дальше .................................................................................. 89
Вопросы и задания ..................................................................... 90
Упражнения ................................................................................. 91
Бизнес-проект ............................................................................. 92
3. ......................................... 95
Глава Планирование узла
Создание спецификации узла .................................................... 95
Определите задачи содержимого .............................................. 96
Проанализируйте свою аудиторию ............................................ 98
Определите технологические проблемы и ограничения ............... 100
Определите необходимые программные средства ........................ 101
Создайте команду разработчиков Web-узла ............................ 102
Создайте соглашения ДЛЯ имен файлов и URL-аАресов .......... 103
Присвоение имен файлам ............................................................... 104
Чувствительность к регистру ........................................................... 104
Исключения в символах .................................................................. 104
I I
Содержание 7
Расширения файлов ........................................................................ 105
Решение проблем с именами файлов ............................................. 105
Стандартное имя главной араницы ............................................... 106
Испольэование URL-адресОВ .......................................................... 106
Создание структуры каталогов .................................................. 107
Относительный и абсолютный пути ................................................ 108
Соэдание относительной аруктуры файлов .................................. 109
Создание схемы узла .................................................................. 112
Поароение информационной аруктуры ........................................ 112
Линейная структура .......................................................................... 113
Структура учебника .......................................................................... 113
Паутинная структура ......................................................................... 114
Иерархическая аруктура ................................................................. 115
Клааерная аруктура ....................................................................... 115
Каталоговая аруктура ...................................................................... 117
Что далЬше ................................................................................. 118
Вопросы и задания .................................................................... 118
Упражнения ............................................................................... 119
Бизнес-проект ............................................................................ 120
Глава 4. Планирование навигации узла ................. 123
Создание удобной системы навигации ..................................... 123
Местонахождение польэователя .................................................... 125
Ограничение на перенасыщение информацией ............................ 126
Создание текстовой системы навигации .................................. 127
Создание текстовой навигационной панели ............................ 129
Соэдание ссылок на отдельные файлы ............................................ 131
добавление внутренних ссылок ...................................................... 133
добавление внутренней навигационной панели ........................... 134
Соэдание ссылок на фрагменты внешних документов ................... 136
Соэдание ссылок для переворачивания араниц ........................... 140
Создание контекстных ссылок ................................................... 143
Использование графики для навигации и ссылок .................... 145
Применение текаовых иэображений
для сиаемы навигации .................................................................. 145
Испольэование пиктограмм для навигации ................................... 146
Испольэование атрибута alt ............................................................ 149
Что дальше ..................................................................................1 51
I I
н Содержание
Вопросы и задания .................................................................... 152
Упражнения ............................................................................... 152
Бизнес-проект ............................................................................ 154
Глава 5. Соэдание шаблонов страниц. ...................... 157
Что такое таблица ...................................................................... 157
Использование элементов таблицы ................................................ 158
Слияние столбцов ............................................................................ 162
Слияние строк .................................................................................. 162
Форматирование таблиц ........................................................... 164
Фиксированная и относительная ширина таблицы ....................... 164
Определение фиксированной ширины таблицы ........................... 165
Удаление стандартных полей таблицы ........................................... 168
Советы по созданию хорошо спланированных таблиц ............ 169
Написание простого для чтения кода таблицы ............................... 169
Удаление лишних пробелов ............................................................ 170
центрирование таблиц .................................................................... 170
Стыковка таблиц ............................................................................... 171
Вложенные таблицы ......................................................................... 172
Создание шаблона таблицы ...................................................... 174
Создание базовой структуры таблицы ............................................ 174
Установка фиксированной ширины ............................................... 176
Создание ячейки для баннера страницы ......................................... 177
Создание ячейки для главной стаТЬи .............................................. 178
Создание ячеек для ссылок ............................................................. 180
Установка ширины столбцов ........................................................... 182
Оценка примеров шаблонов страниц ....................................... 192
Шаблон с двумя столбцами ............................................................ 192
Шаблон с двумя столбцами и баннером ........................................ 192
Шаблон с тремя столбцами ............................................................. 194
Шаблон с тремя столбцами и баннером ......................................... 195
Шаблон с тремя столбцами и разбиением на секции .................... 195
Шаблон с тремя столбцами и разбиением главного ...................... 196
Что дальше ................................................................................. 197
Вопросы и задания ....................................................................1 98
Упражнения ............................................................................ : .. 199
Бизнес-проект ........................................................................... 200
I I
Содержание 9
Глава 6. Технология каскадных таблиц
CТ'Иnей ............................................................... 203
Знакомство справилами С55-стилей ....................................... 20З
Комбинирование правил СSS-стилей с ХНТМL-кодом ................. 205
Создание простой таблицы стилей .......................................... 207
Понятие каскада ........................................................................ 210
Определение приоритета правила
с ключевым словом !important ........................................................ 210
Определение приоритета правила по его источнику ...................... 211
Определение приоритета правила по его профильности .............. 212
Определение приоритета правила по его порядку ......................... 212
Принцип наследования ................................................................... 212
Обычные методы выбора элементов ........................................ 214
Использование текстовых селекторов ............................................ 214
Группирование селекторов ............................................................. 214
Комбинирование описаний ............................................................ 215
Использование наследственных селекторов .................................. 215
Использование обычных методов выбора элементов ................... 216
Расширенные методы выбора элементов ................................. 219
Использование селектора атрибута class ........................................ 220
Использование элементов <div> и <span> ..................................... 222
Что далЬше ................................................................................ 223
Вопросы и задания ................................................................... 224
Упражнения .............................................................................. 225
Бизнес-проект ........................................................................... 228
Глава 7. Web-оформление текста ............................. 231
Основы дизайна шрифтов ......................................................... 231
Не используйте ограниченное количество шрифтов и размеров .. 232
При меняйте доступные шрифты ..................................................... 232
Создание удобного дизайна .......................................................... 234
Реже используйте графический текст ............................................. 235
Единицы измерения в CS5 ........................................................ 23б
Абсолютные единицы ...................................................................... 236
Относительные единицы ................................................................. 237
Единица измерения ет ................................................................... 237
Единица измерения ех ................................................................... 238
Единица измерения рх ................................................................... 238
'.1 I ( I
одержание
Проценты .........................................................................................2 39
Как читать описания свойств .................................................... 239
Использование С55-свойства шрифтов ................................... 240
Указание семейства шрифтов ......................................................... 241
Определение размера шрифта ...................................................... 243
Определение стиля шрифта ........................................................... 244
Определение варианта шрифта ..................................................... 245
Определение веса шрифта ............................................................. 246
Использование краткого свойства шрифта ................................... 246
Использование С55-свойств для определения
расстояний в тексте ................................................................... 247
Отступ текста ................................................................................... 248
Определение выравнивания текста ............................................... 249
Определение декорирования текста .............................................. 250
Определение высоты строки ........................................................... 252
Определение выравнивания по вертикали .................................... 253
Определение межбуквенного интервала ....................................... 255
Определение пробела между словами ........................................... 255
Создание таблицы стилей со свойствами шрифта
и текста ...................................................................................... 256
Присвоение имен стилевым классам ............................................. 259
Добавление области <style> .......................................................... 259
Стиль для класса Ьаппег ................................................................. 260
Стиль для класса tagline .................................................................. 261
Стиль для заголовка ........................................................................ 263
Стиль для подзаголовка ................................................................. 264
Стиль для основного текста ............................................................ 266
Добавление малых прописных букв .............................................. 268
Что дальше ................................................................................ 270
Вопросы и задания ................................................................... 270
Упражнения ............................................................................... 272
Бизнес -проект ............................................................................ 273
Глава 8. Графика и цвет ............................................... 275
Форматы графических файлов ................................................. 275
GIF .................................................................................................... 276
JPG .................................................................................................... 278
PNG .................................................................................................. 279
I I
Содержание 11
SVG .................................................................................................. 280
Использование чересстрочного и последовательного
отображения .................................................................................... 281
Где искать изображения ................................................................. 282
Выбор правильного формата ......................................................... 283
Выбор графического редактора ............................................... 283
Использование элемента <img> .............................................. 285
Замена атрибутов элемента <img> свойствами таблицы
стилей ............................................................................................. 285
Текст для атрибутов alt и title .......................................................... 286
Определение высоты и ширины изображения .............................. 288
Изменение размера изображений для страницы ........................... 291
Управление свойствами изображения с помощью
CSS-стилей ................................................................................ 292
Удаление гипертекстовой рамки .................................................... 292
Выравнивание текста и изображений ............................................. 292
Обтекание изображения ................................................................ 294
Добавление полей вокруг изображения ....................................... 295
Основы компьютерной палитры цветов .................................. 296
Глубина цвета ................................................................................. 296
Размывание .................................................................................... 296
Использование Web-палитры ......................................................... 297
Правильное использование цветов ............................................... 298
Определение значений (SS-цветов ............................................... 298
Использование названий цветов ................................................... 299
RGВ-значения цветов ..................................................................... 299
Шестнадцатеричные значения цветов ........................................... 300
Понятие слоев ................................................................................. 300
Управление свойствами цвета с помощью СSS-стилей ............ 301
Определение значений цвета ......................................................... 302
Установка цвета текста по умолчанию ........................................... 302
Изменение цвета ссылок ................................................................ 303
Определение цвета фона ............................................................... 304
Установка фонового цвета страницы ............................................. 306
Создание инвертироаанного текста ................................................3 07
Использование фонового цвета в таблицах ................................... 307
Работа с изображениями и цветом .......................................... 308
