стр. 1
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

Серия GARAGE

Марк Кэмпбел




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


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




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



Marc Campbell




Prentice Hall Professional Technical reference
Upper Saddle River, NJ • Boston • Indianapolis • San Francisco
PR
HALLCE New York • Toronto • Montreal • London • Munich • Paris • Madrid
PTR 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
Bl
Authorized translation from the English language edition, entitled WEB DESIGN GARAGE, 1 Edition,
ISBN 0131481991, by CAMPBELL, MARC, published by Pearson Education, Inc, publishing as Prentice Hall PTR, Copy-
right © 2005 Pearson Education Inc.
All rights reserved. No part of this work may be reproduced or transmitted in аду form or by any means - elec-
tronic 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 1
Обложка, серия, оформление
ISBN 0-13-148199-1 (США) ООО «Издательство ТРИУМФ», 2006
Оглавление
Введение 11

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

ГЛАВА 1 . Разработка дизайна, облегчающего навигацию 14
ГЛАВА 2 . Группирование схожих функций '.. 20
ГЛАВА 3 . Разработка рисунков для щелчков 28
ГЛАВА 4 . Достижение сбалансированности 36
ГЛАВА 5. Выбор цветов 43
Выбор цветов текста и фона 43
Выбор цветов ссылок 47
Выбор цветов интерфейса 48
ГЛАВА 6 . Разработка специальных возможностей 51
Обеспечение доступности изображений 52
Обеспечение доступности мультимедиа 54
Управление использованием цвета 55
ГЛАВА 7 . Удобство навигации 57
ГЛАВА 8 . Использование меню переходов 62
ГЛАВА 9 . Управление всплывающими окнами 68
Создание всплывающих окон 70
Перемещение всплывающего окна на передний план 73
Добавление ссылки Close 74
ГЛАВА 1 0 . Создание открывающихся меню 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 159
ЧАСТЬ 3. Вопросы, касающиеся изображений .....161
ГЛАВА 27. Выбор правильного типа файла изображения 162
ГЛАВА 28. Оптимизация Web-изображений 164
Оптимизация разрешения 165
Оптимизация размера изображения 167
Оптимизация палитр файлов в форматах GIF и PNG 167
Оптимизации сжатия изображений в формате JPEG 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
Написание каскадных таблиц стилей 214
Написание таблицы стилей 214
Внедрение таблиц стилей 220
Импорт таблиц стилей 221
Использование HTML-атрибута стиля 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> 249
Использование атрибута font-size : 250
Использование констант длины в каскадных таблицах стилей 252
Дневник: способ изменения размера шрифта 253
ГЛАВА 4 9 . Управление интервалами , 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 . Выделение текста с помощью цвета 280
ГЛАВА 5 4 . Реабилитация горизонтальных линий ! 283
Создание знаков конца 286
ГЛАВА 5 5 . Добавление строки даты и метки времени 287
ГЛАВА 5 6 . Разработка таблиц данных 295
Использование большинства тегов группировки 299
Работа с атрибутами colspan и rowspan 300
Выбор значений атрибутов cellpadding и cellspacing 305
Изменение границы 308
Повышение доступности 312
ГЛАВА 5 7 . Использование псевдоэлементов 318

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

ЧАСТЬ 5. Ссылки 325
ГЛАВА 5 9 . Применение стилей к гиперссылкам 326
Дневник: в защиту подчеркивания ссылок :...331
ГЛАВА 6 0 . Создание ролловерных гиперссылок , 332
ГЛАВА 6 1 . Выбор надлежащего пути 334
Использование абсолютных путей 334
Использование относительных путей, указываемых относительно документа 336
Использование относительных путей, указываемых относительно корня 338
ГЛАВА 6 2 . Изменение цвета одиночной гиперссылки 340
Изменение цвета, используемого по умолчанию для всех состояний ссылок 340
Изменение стандартного цвета для отдельных состояний ссылок 341
ГЛАВА 6 3 . Выбор подходящего текста для гиперссылки 343
ГЛАВА 6 4 . Создание всплывающих подсказок для гиперссылок 349
ГЛАВА 6 5 . Открытие нового окна браузера 351
Оглавление 9

ГЛАВА 6 6 . Использование именованных анкеров 352
Задание именованных анкеров 352
Привязка к именованным анкерам 353

ГЛАВА 6 7 . Создание ссылок электронной почты 355

ЧАСТЬ 6. Формы 357

ГЛАВА 6 8 . Работа с элементами управления форм ....358
Работа с кнопками общего назначения 359
Работа с флажкам и , 360
Работа с полями файлов 361
Работа со скрытыми полями 363
Работа с полями изображений 364
Замена кнопки Reset (Сброс) 365
Замена кнопки общего назначения 366
Работа со списками 366
Работа с меню 368
Работа с полями паролей 370
Работа с переключателями 371
Работа с кнопками сброса 373
Работа с кнопками Submit (Передать) 374
Работа с текстовыми областями 375
Работа с текстовыми полями 377
ГЛАВА 6 9 . Применение стилей к текстовым элементам управления 379
Изменение текстового стиля 379
Изменение цвета и границы 382
ГЛАВА 7 0 . Проверка достоверности входных данных формы 385
Г Л А В А 7 1 . Навигация с помощью клавиши Tab 393
ГЛАВА 7 2 . Работа с наборами полей 397
ГЛАВА 7 3 . Работа с метками 405

ЧАСТЬ 7. Специальные приемы 409
ГЛАВА 74. Встраивание мультимедиа 410
ГЛАВА 75. Автоматическое обновление страницы 415
ГЛАВА 76. Автоматическая переадресация браузера 419
ГЛАВА 77. Отображение содержимого,
выбираемого случайным образом 422
ГЛАВА 78. Вывод предупреждения браузера 433
ГЛАВА 79. Отображение всплывающего окна «Вы покидаете сайт» 439
10 Строим Web-сайты

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

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

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

Разработка дизайна, облегчающего навигацию
Группирование схожих функций
Разработка рисунков для щелчков
Достижение сбалансированности
Выбор цветов

стр. 1
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>