Скачать 5.42 Mb.
|
Некоторые иллюстрации я взял в интернете Номер страниц предшествует тексту Серия «Библиотека дизайнера» Дмитрий КИРСАНОВ Веб-дизайн: книга Дмитрия Кирсанова Главный редактор Дизайн книги, иллюстрации Верстка, корректура, индекс Александр Галунов Дмитрий Кирсанов Алина Кирсанова К43 Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. — СПб: Символ-Плюс, 1999 — 376 с.: цв. ил. ISBN 5-93286-003-0 Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет» - Дмитрия Кирсанова (www.kirsanov.com ) - первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом - все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам, - и, конечно же, всем творческим и любознательным людям. ISBN 5-93286-003-0 ©Дмитрий Кирсанов, 1999 © Издательство Символ-Плюс, 1999 Все права на данное издание защищены законодательством Российской Федерации, включая право на полное или частичное воспроизведение в любой форме. Все товарные знаки или зарегистрированные товарные знаки, упоминаемые в настоящем издании, являются собственностью соответствующих фирм. Издательство Символ-Плюс 193148, Санкт-Петербург, ул.Пинегина, 4. тел. (812) 567-8775 Лицензия ЛП №000054 от 25.12.98 Подписано в печать 24 .02.99. Формат 70X90 '/16. Бумага офсетная Печать офсетная. Объем 23 п.л. Тираж 4000 экз. Заказ № 65 Отпечатано с готовых диапозитивов в Академической типографии «Наука» РАН 199034, Санкт-Петербург, 9 линия, 12 оглавление 8 Предисловие 9 Что здесь есть и чего здесь нет 9 Примеры 10 Соглашения 11 О вас 11 Сверим часы 12 Как выбрать дизайнера 13 Обо мне 13 Почему эта тема? 14 Сам себе Гутенберг 14 Глава I. Техминимум 15 Кодировки текста 15 ASCII 16 Однобайтовые кодировки 16 Семейство 8859 17 Двухбайтовые кодировки 17 ISO 10646 и UTF-8 17 HTML 18 История 18 В начале был SGML 18 Прикладная философия 19 Золотой век 19 HTML плюс 20 Идолы рынка 20 Бяки и буки 20 Те же и Microsoft 21 Три, четыре... 21 Синтаксис 22 Подстановки 22 Минимальный документ 23 Текстовая разметка 23 Ссылки и привязки 23 Формы 23 Изображения и объекты 24 Таблицы 24 Фреймы 24 Национальные особенности 25 Согласование кодировок 25 Среды и доступность 25 Доступность: таблицы 26 Как писать alt-тексты 26 Доступность: изображения-карты 27 Мета-данные и поиск 27 Мертвая зона 27 CSS 28 Принципы 29 Возможности 29 Модульный HTML 30 Режем по живому 30 Сборно-панельный сайт 30 Рис. 1 31 Например 31 XML 32 Синтаксис 32 DTD 32 Уровни соответствия 33 Конверсия 34 Надстройки 34 XLL 34 XSL 35 Графика 36 Вектор 36 Вектор в Интернете 37 Растр 38 На все четыре стороны 38 Цвета 38 Палитры 39 Системы представления цвета 39 Программирование 40 JavaScript 40 Динамический HTML 40 Модульные технологии 41 Динамические страницы 43 Глава II. Основы дизайна 44 Как учиться дизайну 45 Дизайн и «чужое творчество» 45 Материалы и инструменты 46 Пространственные отношения 46 Размер 46 Относительность размера 47 Форма и размер 47 Рис. 2 47 Рис. 3 48 Искусство выравнивания текста 48 Рис. 4 48 Цвет и размер 48 Текстура и размер 49 Рис. 5 49 Пропорции 49 Рис. 6 49 Золото и пластмасса 50 Пропорций простота 50 Рис. 7 50 Микропропорции 51 Размещение 51 Одноуровневые элементы 51 Рис. 8 52 Разноуровневые элементы 53 Плотность 53 Пол И характер 53 Плотность текста 54 В нужное время и в нужном месте 54 Форма 55 Рис. 9 55 Прямые 56 Рис. 10 56 Рис. 11 57 Рис. 12 57 Дизайн Пизанской башни 57 Прямоугольники 58 Круги и закругления 59 Рис. 14 60 Кривые Безье 61 Рис. 15 61 Бесформенность 61 Рис. 16 61 Рис. 17 62 Цвет 63 Рис. 18 63 Как устроен цвет 63 Рис. 19 64 Прогулка по цветовому кругу 65 Ну и что? 66 Главные цвета 66 Восприятие цвета 66 Сочетаемость цветов 67 Рис. 20 68 Рис. 21 68 Текст и фон 69 Рис. 22 69 Текстуры 71 Плоский цвет 71 Геометрические текстуры 72 Пиксельные текстуры 72 Рис. 25 72 Фотографические текстуры 72 Рис. 26 73 Материальные текстуры 73 Шрифт и текст 74 Элементы шрифта. 75 Гарнитура, начертание, шрифт 75 Systema naturae 75 Виды начертаний 76 Рис. 27 76 Шрифты и время. 76 Рис. 29 77 Рис. 30 78 Рис. 31 78 Переходные шрифты 79 Новая антиква 79 Рис. 32 79 Кларендон 79 Новые рубленые 80 Маятник гуманизма 80 Рис. 33 80 Рис. 34 81 Рис. 35 81 Подбор Шрифтов 82 Единство противоположностей 82 Слишком декоративные шрифты 83 Развивая тему 83 Шрифты и названия 84 Рис. 36 84 Параметры Набора 84 Кегль 85 Прописные и строчные 85 Интервалы 86 Рис. 37 86 Рис. 38 87 Выравнивание и отступы 88 Размещение 88 Рис. 39 89 Чья случайность лучше? 89 Цвет 90 Текст как текстура 90 Единство 90 Content is king 91 Академический стиль 91 В полный рост 93 Форма 93 Размещение 93 Цвет 93 Шрифт 93 Текстура 94 Баланс 94 Центр масс системы 94 Правило рычага 95 Рис. 40 95 Контраст 96 Контраст — это продолжение единства другими средствами 96 Одномерный контраст 96 Многомерный контраст 97 Рис. 41 97 Рис. 42 98 Рис. 43 98 Аспекты контраста 99 Форма 99 Размер 99 Расстояние 99 Расположение 99 Цвет 99 Текстура 99 Шрифт 100 Динамика 100 Рис. 44 101 Динамика явная 101 Ветер по Гауссу 101 Динамика совсем явная 102 Динамика неявная 102 Рис. 45 103 Нюансировка 103 Пространственные отношения 104 Цвет 104 Шрифт 105 Глава III. Дизайн веб-сайтов 105 Преграды и препоны 105 От общего к частному 106 Типы сайтов 106 Первый шаг 107 Рис. 46 107 В мире .org 107 Скорей любите нас 108 Бесплатный сыр 109 Устройство сайта 109 Неупорядоченный континуум 110 Топология сайта 110 Рис. 47 110 Распределение материала 111 Фреймы и окна 112 Первая страница 113 Всплеск и вскрик 113 Формат страницы 114 The frame of reference 114 Заметки о полях 115 Во первых строках 115 У голубого экрана 116 Если тебе дадут линованную бумагу — пиши поперек 116 Ступеньки ригидности 116 Заглавия и заголовки 118 Заглавие 118 Заголовки: логика 118 Заголовки: дизайн 119 Разделители 120 Рис. 48 120 Баннеры 120 Навигация 121 Общий обзор 121 Семантика 122 Дизайн 123 Рис. 49 123 Разновидности одинаковости 123 По ту сторону кнопок 124 Символы и метафоры 124 Рис. 50 125 Особые случаи 125 Динамическая навигация 126 Рис. 51 126 Блоки текста 127 Кегль 127 Шрифт 128 Коренные шрифты 129 Все шрифты ношу с собой 129 Осторожно: кириллица 130 Цвет 131 Ссылки 131 Другие параметры 132 When all else fails 133 Правила набора текстов 134 Расстановка пробелов 134 Неразрываемые пробелы 134 Текстовые выделения 135 Спецсимволы 135 Позиционирование 136 Таблицы и распорки 136 Дурная наследственность 137 Двойное дно 138 Белое место 138 Фэйсом об тэйбл 139 Рис. 52 140 Позиционирование в CSS 140 Глава IV. Веб-графика 141 Техника 142 Палитра и диффузия 142 Цветовые границы 144 Рис. 55 144 Рис. 56 145 Экранный анти-алиасинг 145 Из-под пятницы суббота 145 Пиксельные эффекты 146 ОПТИМИЗАЦИЯ 147 JPEG 147 Взболтать и настоять 148 Чудное мгновенье 149 Рис. 57 149 Blow up 149 Функции 150 Выставочная графика 150 Фоны 151 Как не надо делать фон 151 Прогладить с изнанки 152 Рис. 58 152 Рис. 59 153 Одномерные фоны 153 Одним куском 154 Рис. 60 154 ЛОГОТИПЫ 155 Диалектика формы 155 На единицу площади 156 Про что картинка? 157 Символ и слово 157 Аспекты логотипа 158 Форма 158 Рис. 63 158 Рис. 64 159 Рис. 65 159 Шрифт 160 Рис. 66 160 Текстура 161 Рис. 67 162 Баннеры 162 Сколько натикало? 162 Форматы 163 В нужное время и в нужном месте 163 Слева при входе 164 Рис. 68 166 В начале было что-то 166 Собственная гордость 167 Рис. 69 167 Рис. 70 167 Рис. 71 168 Удар ниже пояса 168 Смена поколений 169 На килограмм живого веса 169 Acknowledgements 169 Рис. 72 170 Визуал 170 Рынок визуалов 170 Рис. 74 171 Приемы 172 Трехмерность 172 Император иллюзий 172 Пластмассовый призрак 173 Скульптура или барельеф 173 Рис. 75 174 Искусство искажений 174 Нетекстурирующие эффекты 175 Текстурирующие эффекты 177 Рис. 76 «Большой, но за пять или маленький, но за три» 177 Примеры 178 www.kirsanov.com 179 Логотип 179 Рис. 77 Генезис логотипа 180 Рис. 78 (см. цветную вкладку, стр. 335) 180 Цветовая схема 181 Входные цвета 181 Рис. 79 (см. цветную вкладку, стр. 335) 181 Информационные цвета 182 Первая страница 182 Рис. 80 183 Карты на стол 183 Навигация 184 Рис. 81 184 Рис. 82 185 www.quiotix.com 185 Логотип 186 Рис. 83 186 Рис. 84 187 Рис. 85 187 Первая страница 187 Рис. 86 Эволюция буквы «Q» 188 Рис. 87 (см. Цветную вкладку, стр. 336) 188 Рис. 88 (см. цветную вкладку, стр. 336) 188 Рис. 89 189 Внутренние страницы 189 Рис. 90 (см. цветную вкладку, стр. 336) 189 Рис. 91 190 Miscellanea 190 Рис. 92 190 Рис. 93 191 Галерея 191 1. www.avsi.com/avalanche/company/index.html 192 2. www.elliottdickens.com 192 3. www.elliottdickens.com/browser.cgi 192 4. www.finemagazine.com/fine1/music/torih.htm 193 5. www.prophetcomm.com/iconoclast/ 193 6. www.metadesign.com 194 8. www.aboutus.miningco.com 194 7. www.metadesign.com/metawho/index.htm 194 9. www.microsoft.com/license/opendrive/ 195 10. www.splashtech.com 195 11. www.supercede.com/prodserv/scfjava.html 196 12. www.wps.ru 196 13. www.bdaweb.com 197 14. www.capstonestudio.com 197 15. (Книги России 1) www.books.ru 198 16. www.ideo.com/net3/ideo.htm 199 17/ www.chess.ibm.сom/learn/html/e.html 199 18.www.tlg.com 200 19. www.verso.com 201 20. www.vivid.com 202 Рис. 19 202 Рис. 20 202 Рис. 22 (к стр. 114) 203 Рис. 21 203 Рис. 43 203 Рис. 78 203 Рис. 79 203 Рис. 87 204 Рис. 88 (к стр. 318) 204 Рис. 89 (к стр. 319) 205 Рис. 90 (к стр. 320) 205 Рис. 91 (к стр.321) 205 Рис. 92 (к стр. 322) 205 Индекс 205 Символы. 205 А(латиница). 206 B. 207 С. 207 D. 208 E 208 F 209 G 209 Н. 209 I. 210 J. 210 К. 211 L. 211 М 211 N. 211 O. 212 Р 212 Q. 212 R. 212 S. 212 Т. 213 U. 213 V. 213 W. 213 X. 215 Z. 215 Б. 217 В. 218 Г. 219 Д. 220 Е. 221 Ж. 222 3. 222 И. 222 К. 223 Л. 225 М. 226 Н. 227 О. 228 П. 229 Р. 231 С. 232 Т. 234 У. 236 Ф. 236 Х. 237 Ц. 237 Ч. 238 Ш. 238 Э. 239 Я. 239 оглавлениеi Предисловие (1) Что здесь есть и чего здесь нет (1) Примеры (2) Соглашения (3) Пара слов о словах (4) О вас (5) Сверим часы (6) Как выбрать дизайнера (8) Обо мне (9) Почему эта тема? (10) Сам себе Гутенберг (11) Книга как технология (12) Техминимум. 1.1 Кодировки Текста (14) ASCII (15) Однобайтовые кодировки (15) Так и срослось (17) Семейство 8859 (17) Двухбайтовые кодировки (18) ISO 10646 и UTF-8 (18) 1.2 HTML (19) История (19) В начале был SGML (19) Прикладная философия (21) Золотой век (22) HTML плюс (23) Идолы рынка (23) Бяки и буки (24) Те же и Microsoft (25) Три, четыре... (26) Синтаксис (27) Подстановки (28) Минимальный документ (29) Текстовая разметка (29) Ссылки и привязки (30) Формы (30) Изображения и объекты (31) Таблицы (32) Фреймы (32) Национальные особенности (32) Согласование кодировок (33) Среды и доступность (34) Доступность: таблицы (35) Как писать alt-тексты (35) Доступность: изображения-карты (37) Мета-данные и поиск (38) Мертвая зона (38) Сухой остаток (39) 1.3 CSS (40) Принципы (41) Возможности (42) Модульный HTML (43) Режем по живому (44) Сборно-панельный сайт (44) Например (46) 1.4 XML (47) Синтаксис (48) DTD (48) Уровни соответствия (50) Конверсия (51) Надстройки (52) XLL (52) XSL (53) 1.5 Графика (55) Вектор (56) Вектор в Интернете (57) 3D (59) Растр (59) На все четыре стороны (60) Цвета (60) Палитры (61) Системы представления цвета (62) 1.6 Программирование (63) JavaScript (64) Динамический HTML (65) Модульные технологии (67) Динамические страницы (71) Основы дизайна. Как учиться дизайну (75) Дизайн и «чужое творчество» (76) Материалы и инструменты (77) II.1 Пространственные отношения (78) Размер (78) Относительность размера (79) Форма и размер (79) Искусство выравнивания текста (80) Цвет и размер (81) Текстура и размер (81) Пропорции (82) Золото и пластмасса (82) Пропорций простота (83) Микропропорции (84) Размещение (84) Одноуровневые элементы (85) Разноуровневые элементы (88) Плотность (89) Пол и характер (89) Плотность текста (90) В нужное время и в нужном месте (90) II.2 Форма (91) Прямые (92) Дизайн Пизанской башни (94) Прямоугольники (94) Круги и закругления (97) Кривые Безье (99) Бесформенность (100) ii II.3 Цвет (101) Как устроен цвет (103) Прогулка по цветовому кругу (105) Ну и что? (108) Главные цвета (108) Восприятие цвета (109) Сочетаемость цветов (ПО) Текст и фон (113) II.4 текстуры (116) Плоский цвет (117) Геометрические текстуры (118) Пиксельные текстуры (119) Фотографические текстуры (119) Материальные текстуры (120) II.5 Шрифт и текст (122) Элементы шрифта (124) Гарнитура, начертание, шрифт (124) Systema naturae (124) Виды начертаний (125) Шрифты и время (126) Классическая антиква (127) Переходные шрифты (129) Новая антиква (129) Кларендон (130) Новые рубленые (131) Маятник гуманизма (131) Подбор шрифтов (133) Единство противоположностей (134) Слишком декоративные шрифты (134) Развивая тему (135) Шрифты и названия (137) Параметры набора (138) Кегль (138) Прописные и строчные (140) Интервалы (141) Выравнивание и отступы (144) Размещение (145) Чья случайность лучше? (146) Цвет (147) Текст как текстура (148) II.6 ЕДИНСТВО (149) Content is king (150) Академический стиль (150) В полный рост (153) II.7 Баланс (155) Центр масс системы (156) Правило рычага (157) II.8 Контраст (159) Контраст — это продолжение единства другими средствами (160) Одномерный контраст (160) Многомерный контраст (161) Аспекты контраста (163) II.9 Динамика (167) Динамика явная (168) Ветер по Гауссу (169) Динамика совсем явная (169) Динамика неявная (170) II.10 Нюансировка (172) Дизайн веб-сайтов. (175) Преграды и препоны (176) От общего к частному (178) III.1 Типы сайтов (179) Первый шаг (179) В мире .org (ISO) Скорей любите нас (181) Бесплатный сыр (182) III.2 Устройство сайта (184) Неупорядоченный континуум (184) Топология сайта (185) Распределение материала (186) Фреймы и окна (188) Первая страница (190) Всплеск и вскрик (191) III.3 Формат станицы (192) The frame of reference (193) Заметки о полях (194) Во первых строках (195) У голубого экрана (196) Если тебе дадут линованную бумагу — пиши поперек (196) Ступеньки ригидности (197) III.4 Заглавия и Заголовки (199) Заглавие (199) Заголовки: логика (200) Заголовки: дизайн (201) Разделители (203) Баннеры (204) iii III.5 Навигация (205) Общий обзор (206) Семантика (207) Дизайн (208) Разновидности одинаковости (209) По ту сторону кнопок (210) Символы и метафоры (210) Особые случаи (212) Динамическая навигация (213) III.6 Блоки текста (215) Кегль (216) Шрифт (218) Коренные шрифты (220) Все шрифты ношу с собой (221) Осторожно: кириллица (222) Цвет (223) Ссылки (224) Другие параметры (225) When all else fails (227) Правила набора текстов (228) Расстановка пробелов (228) Неразрываемые пробелы (229) Текстовые выделения (230) Спецсимволы (230) III.7 Позиционирование (233) Таблицы и распорки (234) Дурная наследственность (235) Двойное дно (236) Белое место (237) Фэйсом об тэйбл (238) Позиционирование в CSS (240) Веб-графика. (243) IV.1 Техника (244) Палитра и диффузия (245) Цветовые границы (247) Экранный анти-алиасинг (249) Из-под пятницы суббота (249) Пиксельные эффекты (251) Оптимизация (252) JPEG (252) GIF (253) Взболтать и настоять (254) Чудное мгновенье (255) Blow up (256) IV.2 Функции (257) Выставочная графика (257) Фоны (259) Как не надо делать фон (259) Прогладить с изнанки (261) Одномерные фоны (262) Одним куском (263) Логотипы (264) Диалектика формы (266) На единицу площади (267) Про что картинка? (267) Символ и слово (268) Аспекты логотипа (269) Баннеры (275) Сколько натикало? (275) Форматы (277) В нужное время и в нужном месте (277) Слева при входе (279) Больше жизни (279) Пьеса в трех действиях (280) В начале было что-то (282) Собственная гордость (283) Удар ниже пояса (284) Смена поколений (286) На килограмм живого веса (286) Acknowledgements (287) Визуал (288) Рынок визуалов (288) IV.3 Приемы (290) Трехмерность (290) Император иллюзий (291) Пластмассовый призрак (292) Скульптура или барельеф (293) Искусство искажений (295) Что упало, то пропало (295) Нетекстурируюшие эффекты (296) Текстурирующие эффекты (299) Примеры. V.1 www.kirsanov.com (304) Логотип (304) Цветовая схема (307) Входные цвета (307) Информационные цвета (309) Первая страница (310) Карты на стол (310) Навигация (312) V.2 http://www.quiotix.com (314) Логотип (315) Первая страница (317) Внутренние страницы (320) Miscellanea (321) V.3 Галерея (323) Индекс (337) 1 |
Электронные образовательные ресурсы, доступ к которым обеспечивается обучающимся В школе функционируют 9 точек Wi-Fi подключения к сети Интернет, 22стационарных компьютеров соединены в локальную сеть и подключены... | Программа по формированию навыков безопасного поведения на дорогах... ... | ||
Сценарий для районного конкурса квн на «кубок чемпионов» Автор. Здравствуйте! Хочу поделиться с вами радостью не так давно у меня появился модем, и теперь мне путь в Интернет открыт! | Понятие Интернет-зависимости, её причины, типы, признаки, последствия Таким образом, на сегодняшний день каждый третий житель России является пользователем Интернета, а каждый седьмой посещает Интернет... | ||
Реферат по дисциплине Сетевые технологии высокоскоростных систем... Но когда появляется желание лазить в Интернет с компьютера, лэптопа и кпк с возможностью беспроводного подключения, задумываешься... | Программа по формированию навыков безопасного поведения на дорогах... Условия: компьютерный класс, вариант I 1 ученик 1 компьютер, подключение к сети Интернет; вариант II – наличие мобильного телефона... | ||
Программа по формированию навыков безопасного поведения на дорогах... Необходимое техническое оборудование: компьютер, возможность подключения к Интернет, мультимедийный проектор | Программа по формированию навыков безопасного поведения на дорогах... Цель: рассмотреть какие сети образуют Интернет; способы подключения к Интернету: их достоинства и недостатки | ||
Книга Энки Захария Ситчин Она по-разному трактуется в разных культурах и религиях, да и научное сообщество пока еще не дает однозначного ответа. «Потерянная... | Программа по формированию навыков безопасного поведения на дорогах... В октябре 2006г. С риц пришло приложение №1-№3 к письму мо ро от 28. 09. 2006г. №6776/03 о процедуре приемки услуги подключения к... | ||
Техническое обеспечение образовательного процесса в оу Икт и для выхода в Интернет. Для выполнения работ на уроках информатики и математики | Александр Амзин Новостная интернет-журналистика Эта книга называется "Новостная интернет-журналистика". Таким образом, она состоит из двух частей собственно интернета и новостной... | ||
Рекомендации относительно защиты от несанкционированных переключений... Является отсутствие опыта или невнимательность обычных пользователей. Подобные случаи случаются, если абонент бессознательно санкционирует... | Программа по формированию навыков безопасного поведения на дорогах... Необходимое техническое оборудование: компьютеры, мультимедийный проектор, экран, наличие выхода в сеть интернет, цифровые образовательные... | ||
Баку,, ул. Хагани, 14 3 этаж, Тел.: 985475, 936488 Факс: 937356 Баку,, ул. Юсифзаде, 3, Тел.: 663139 Факс: 939955"azexim" баку, ул. Ландау, 16, Тел.: 989726, 975054 Факс: 986049 | Как смотреть видео онлайн Что нужно Персональный компьютер, планшетный компьютер или смартфон с возможностью выхода в сеть Интернет и возможностью проигрывания потокового... |