- •Дмитрий кирсанов
- •Глава I. Техминимум 18
- •Глава II. Основы дизайна 56
- •Глава III. Дизайн веб-сайтов 131
- •Глава IV. Веб-графика 175
- •Оглавление
- •II.1 Пространственные отношения (78)
- •II.10 Нюансировка (172)
- •V.3 Галерея (323)
- •Предисловие
- •Что здесь есть и чего здесь нет
- •Примеры
- •Соглашения
- •Сверим часы
- •Как выбрать дизайнера
- •Почему эта тема?
- •Сам себе Гутенберг
- •Глава I. Техминимум
- •Кодировки текста
- •Однобайтовые кодировки
- •Семейство 8859
- •Двухбайтовые кодировки
- •История
- •В начале был sgml
- •Прикладная философия
- •Золотой век
- •Html плюс
- •Идолы рынка
- •Бяки и буки
- •Три, четыре...
- •Синтаксис
- •Подстановки
- •Минимальный документ
- •Текстовая разметка
- •Ссылки и привязки
- •Изображения и объекты
- •Национальные особенности
- •Согласование кодировок
- •Среды и доступность
- •Доступность: таблицы
- •Как писать alt-тексты
- •Доступность: изображения-карты
- •Мета-данные и поиск
- •Мертвая зона
- •Принципы
- •Возможности
- •Модульный html
- •Режем по живому
- •Сборно-панельный сайт
- •Например
- •Синтаксис
- •Уровни соответствия
- •Конверсия
- •Надстройки
- •Графика
- •Вектор в Интернете
- •На все четыре стороны
- •Палитры
- •Системы представления цвета
- •Программирование
- •Динамический html
- •Модульные технологии
- •Динамические страницы
- •Глава II. Основы дизайна
- •Как учиться дизайну
- •Дизайн и «чужое творчество»
- •Материалы и инструменты
- •Пространственные отношения
- •Относительность размера
- •Форма и размер
- •Искусство выравнивания текста
- •Цвет и размер
- •Текстура и размер
- •Пропорции
- •Золото и пластмасса
- •Пропорций простота
- •Микропропорции
- •Размещение
- •Одноуровневые элементы
- •Разноуровневые элементы
- •Плотность
- •Пол и характер
- •Плотность текста
- •В нужное время и в нужном месте
- •Дизайн Пизанской башни
- •Прямоугольники
- •Круги и закругления
- •Кривые Безье
- •Бесформенность
- •Как устроен цвет
- •Прогулка по цветовому кругу
- •Главные цвета
- •Восприятие цвета
- •Сочетаемость цветов
- •Текст и фон
- •Текстуры
- •Плоский цвет
- •Геометрические текстуры
- •Пиксельные текстуры
- •Фотографические текстуры
- •Материальные текстуры
- •Шрифт и текст
- •Элементы шрифта.
- •Гарнитура, начертание, шрифт
- •Виды начертаний
- •Шрифты и время.
- •Переходные шрифты
- •Новая антиква
- •Кларендон
- •Новые рубленые
- •Маятник гуманизма
- •Подбор Шрифтов
- •Единство противоположностей
- •Слишком декоративные шрифты
- •Развивая тему
- •Шрифты и названия
- •Параметры Набора
- •Прописные и строчные
- •Интервалы
- •Выравнивание и отступы
- •Размещение
- •Чья случайность лучше?
- •Текст как текстура
- •Единство
- •Академический стиль
- •В полный рост
- •Размещение
- •Текстура
- •Центр масс системы
- •Правило рычага
- •Контраст
- •Контраст — это продолжение единства другими средствами
- •Одномерный контраст
- •Многомерный контраст
- •Аспекты контраста
- •Расстояние
- •Расположение
- •Текстура
- •Динамика
- •Динамика явная
- •Ветер по Гауссу
- •Динамика совсем явная
- •Динамика неявная
- •Нюансировка
- •Пространственные отношения
- •Глава III. Дизайн веб-сайтов
- •Преграды и препоны
- •От общего к частному
- •Типы сайтов
- •Первый шаг
- •В мире .Org
- •Скорей любите нас
- •Бесплатный сыр
- •Устройство сайта
- •Неупорядоченный континуум
- •Топология сайта
- •Распределение материала
- •Фреймы и окна
- •Первая страница
- •Всплеск и вскрик
- •Формат страницы
- •Заметки о полях
- •Во первых строках
- •У голубого экрана
- •Если тебе дадут линованную бумагу — пиши поперек
- •Ступеньки ригидности
- •Заглавия и заголовки
- •Заглавие
- •Заголовки: логика
- •Заголовки: дизайн
- •Разделители
- •Баннеры
- •Навигация
- •Общий обзор
- •Семантика
- •Разновидности одинаковости
- •По ту сторону кнопок
- •Символы и метафоры
- •Особые случаи
- •Динамическая навигация
- •Блоки текста
- •Коренные шрифты
- •Все шрифты ношу с собой
- •Осторожно: кириллица
- •Другие параметры
- •Правила набора текстов
- •Расстановка пробелов
- •Неразрываемые пробелы
- •Текстовые выделения
- •Спецсимволы
- •Позиционирование
- •Дурная наследственность
- •Двойное дно
- •Белое место
- •Фэйсом об тэйбл
- •Позиционирование в css
- •Глава IV. Веб-графика
- •Техника
- •Палитра и диффузия
- •Цветовые границы
- •Экранный анти-алиасинг
- •Пиксельные эффекты
- •Оптимизация
- •Взболтать и настоять
- •Чудное мгновенье
- •Функции
- •Выставочная графика
- •Как не надо делать фон
- •Прогладить с изнанки
- •Одномерные фоны
- •Одним куском
- •Логотипы
- •Диалектика формы
- •На единицу площади
- •Про что картинка?
- •Символ и слово
- •Аспекты логотипа
- •Текстура
- •Баннеры
- •Сколько натикало?
- •Форматы
- •В нужное время и в нужном месте
- •Слева при входе
- •В начале было что-то
- •Собственная гордость
- •Удар ниже пояса
- •Смена поколений
- •На килограмм живого веса
- •Рынок визуалов
- •Трехмерность
- •Император иллюзий
- •Пластмассовый призрак
- •Скульптура или барельеф
- •Искусство искажений
- •Нетекстурирующие эффекты
- •Текстурирующие эффекты
- •Логотип
- •Цветовая схема
- •Входные цвета
- •Информационные цвета
- •Первая страница
- •Карты на стол
- •Навигация
- •Логотип
- •Первая страница
- •Внутренние страницы
- •Галерея
- •15. (Книги России 1) www.Books.Ru
- •Индекс Символы.
- •А(латиница).
Осторожно: кириллица
Любая попытка изменить шрифт, которым выводится текст, осложняет и без того непростую ситуацию с поддержкой в HTML русского алфавита. Даже без какого бы то ни было переключения шрифтов русский текст может оказаться для какой-то части вашей аудитории нечитабельным; очевидно, что любые эксперименты в шрифтовой области способны только повысить вероятность этого печального исхода.
Собственно говоря, из описанных выше технологий только встраивание шрифта в документ способно гарантировать соответствие кодировок текста и шрифта (что и понятно —
223
ведь только в этом случае и текст, и шрифт готовятся одним человеком). Однако сами технологии встраивания, о которых мы только что говорили, пока что мало распространены даже среди пользователей графических броузеров. Не говоря уж о том, что полагаться на соответствие кодировки текста кодировке встроенного шрифта очень опасно — при этом можно ненароком лишить доступа к тексту многочисленных пользователей, не желающих или не имеющих возможности использовать какие бы то ни было шрифты (те же программы-роботы и владельцы речевых броузеров, стр. 34).
Сейчас на русскоязычных сайтах изредка применяется лишь самое простое из всех шрифтовых решений — переключение в рубленый шрифт, для чего можно написать FONT face="arial cyr,arial". Однако даже этот простейший вариант почти наверняка доставит неприятности многим вашим пользователям, так что лучше всего не искушать судьбу и обойтись для русского текста шрифтом по умолчанию.
Цвет
Цвета текста и фона играют в HTML особую роль — эти параметры указываются в атрибутах тега BODY и потому относятся скорее к свойствам всего документа, чем к параметрам набора текста. А поскольку ошибка в этих параметрах может запросто привести к нечитабельности текста (если цвет букв совпадает с цветом фона или близок к нему), пользователь любого визуального броузера имеет возможность выбрать свои собственные значения для цвета фона, текста и ссылок и запретить броузеру обращать внимание на цветовые атрибуты тега BODY. Одним из следствий этого является то, что в этом теге нужно либо не указывать ни одного цветового атрибута, либо обязательно перечислить все три; любая частичная спецификация (например, указание цвета текста без упоминания о цвете фона) может конфликтовать с цветами, установленными по умолчанию в броузере пользователя.
Если на странице используется фоновое изображение, указываемый в теге BODY цвет фона должен соответствовать цвету «среднестатистического» пиксела фонового изображения. Только при этом условии пользователи, отключившие загрузку графики, не будут испытывать затруднений с чтением текста, а те, у кого фоновое изображение еще не докачалось, не будут шокированы резким перескоком
224
цветов в тот момент, когда фон внезапно подстилается под уже видимые элементы переднего плана.
Цвета, указываемые в атрибуте color тега FONT, перекрывают как цвет из атрибута text тега BODY, так и цветовые установки броузера. Можно даже менять цвет ссылок, вставив тег FONT с атрибутом color внутрь тега A. CSS, в свою очередь, позволяет менять не только цвет букв, но и фоновый цвет любого элемента, в том числе и фоновый цвет отдельных символов и фрагментов текста. Если часть текста закрашена одним цветом, а часть другим (что обычно бывает, когда фон состоит из сильно различающихся по цвету областей — например, светлой центральной части и темной полосы вдоль границы экрана), фоновый цвет в теге BODY должен быть таким, чтобы на нем были легко различимы оба цвета текста.
Как и цвета в графических вставках, указываемые в HTML цвета текста, фона страницы и фона ячеек таблиц подвергаются искажениям на 256-цветных мониторах. Однако ничего похожего на «безопасную палитру» (стр. 248) для этих HTML-цветов, к сожалению, не предусмотрено: броузер просто сводит эти цвета к ближайшим цветам текущей палитры экрана, что может давать самые непредсказуемые результаты (например, указанный в теге BODY фоновый цвет может далеко разойтись с тем же самым цветом, использованным в изображении).
Выбрав для текста чисто белый текст на не-белом фоне, имейте в виду, что броузер не станет воспроизводить фоновый цвет при печати страницы на принтере. MSIE поступит при этом вполне разумно, самостоятельно заменив перед посылкой на печать цвет текста на черный, но в броузере Netscape для этого нужно будет установить (по умолчанию сброшенный) флажок Black Text в настройках печати (точнее, вам как автору страницы нужно будет напомнить сделать это вашему читателю), — иначе из принтера вылезет белый лист без каких-либо следов текста страницы. Об этом нужно помнить при выборе цветовой схемы для страниц, которые пользователь с большой вероятностью захочет распечатать (счетов, инструкций и т.п.).
Ссылки
Гипертекстовые ссылки — элемент, не имеющий прямых аналогов в других жанрах дизайна и требующий поэтому особого внимания создателя сайта. Так же как плотность размещения и тщательная взаимная подгонка графических элементов есть признак хорошего качества визуального дизайна (стр. 84), о качестве подготовки текста на веб-сайте можно довольно быстро составить впечатление по тому, насколько этот текст насыщен ссылками. Если в этой книге мое стремление отследить все связи глав и разделов сдерживалось нежеланием загромождать текст бесконечными «стр. такая-то», то на веб-сайте можно дать себе полную волю — ведь гипертекстовые ссылки почти не мешают чтению.
225
С другой стороны, разумеется, добавление ссылки не может пройти бесследно для звучания, интонации и, в каком-то отношении, даже для смысла фразы. Если считать ссылку разновидностью текстового выделения, то можно сформулировать несколько практических советов. Прежде всего, точно так же как курсивом не стоит выделять целое предложение, длину ссылки нужно ограничивать необходимым минимумом — например, ссылкой на архив с программой достаточно сделать ее название или слово «download», а не всю фразу целиком. Ссылочным лучше всего делать то слово или словосочетание, которое допускает, с учетом смысла всего предложения, произнесение с логическим ударением (эмфазисом), пусть и не сильно выраженным. И наконец, следует избегать разметки ссылок поверх курсива, полужирного и других традиционных средств текстового выделения. Кстати, довольно-таки странно выглядит ссылка во внутритекстовом заголовке (если только вы не решите снабжать ссылками — например, на список разделов вверху страницы — все заголовки подряд).
Общепринятые визуальные атрибуты ссылки — измененный по отношению к основному тексту цвет (о принципах выбора которого мы говорили на стр. 113) и подчеркивание — явно дублируют друг друга. И хотя такое двойное акцентирование помогает ориентироваться в текстовых ссылках быстро и почти подсознательно, подчеркивание все же не стало в массовом сознании обязательным признаком гипертекстовой ссылки. Косвенным подтверждением этому может служить тот факт, что в графических ссылках (например, на кнопках навигации) текст почти никогда не снабжается подчеркиванием. Поэтому в последнее время появляется все больше сайтов, отключающих с помощью CSS подчеркивание и для текстовых ссылок (для этого в стилевой спецификации достаточно написать A {text-decoration: none}).