- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
У голубого экрана
Получившиеся минимальные габариты видимой части страницы — 580 на 350 пикселов — определяются разрешением экрана массовых персональных компьютеров PC и Макинтош. Однако недавно появилось еще одно устройство для доступа к сети — гибрид компьютера и телевизора под названием WebTV (www.webtv.net ). Коробочка с модемом, процессором и зашитым в нестираемую память броузером, ценой около 200 долларов, позволяет путешествовать по сети, читая веб-страницы с экрана своего телевизора и выбирая ссылки при помощи пульта дистанционного управления (для ввода текста в поля бланков можно присоединить отдельно продающуюся клавиатуру).
Для дизайнера WebTV прежде всего интересен более жесткими ограничениями на формат страницы. Размер рабочей части экрана на всех устройствах этого типа один и тот же — 544 на 376 пикселов, и изменить его пользователь не может. А хуже всего то, что при более узком, чем у компьютерных броузеров, экране это устройство не позволяет прокручивать страницу по горизонтали — если что-то вылезет за правую границу экрана, оно так и останется недоступным. Очевидно, ограничения WebTV нет смысла учитывать в дизайне русскоязычных сайтов, так как в России эти устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже заметный и постоянно увеличивающийся процент.
Если тебе дадут линованную бумагу — пиши поперек
Традиционное построение веб-страницы в высоту с вертикальной прокруткой — не единственная возможность. Некоторые дизайнеры резонно рассудили, что плоха не горизонтальная прокрутка сама по себе, а ее сочетание с вертикальной, — и положили свои страницы набок, тем самым избавившись от вертикальной прокрутки и активно задействовав горизонтальную. В этих «лежачих», панорамных страницах ослаблены иерархические связи элементов, а последовательность их восприятия (обычно ассоциирующаяся с вертикальным расположением материала) задана
197
гораздо менее жестко. Такие страницы не «читаются» и не «просматриваются», а именно рассматриваются как нечто цельное, одноуровневое и одномоментное. Так, в примере 3 главный визуал страницы — фотография — смешен вправо и обрезан краем окна именно для того, чтобы у зрителя возникло непреодолимое желание посмотреть — «а что там, за поворотом?» Страница эта открывает собой целый «горизонтальный» сайт и рассчитана на пользователя, который впервые сталкивается с таким необычным размещением материала, — поэтому дополнительная «стимуляция» с помощью частично видимой фотографии здесь вполне уместна. Результат — из рутинной, почти подсознательной операции промотка окна становится волнующим открытием.
К сожалению, владельцы WebTV не имеют ни малейшей надежды насладиться этим изыском дизайна — горизонтальной прокрутки у них нет вообще. Нет ее, кстати, и у встроенных в броузеры функций печати — при попытке распечатать «горизонтальную» страницу оба броузера обрежут ее правый край, оставив видимыми около 800 пикселов ширины.
Ступеньки ригидности
Интересно проследить, как меняется отношение страницы к описанным ограничениям формата в зависимости от назначения сайта и стиля дизайна. Для страниц, оформленных в строгом академическом стиле (с использованием только тегов HTML 2.0, стр. 150), размеры окна вообще не имеют значения, так как HTML 2.0 просто не позволяет задавать размеры или расположение чего бы то ни было в пикселах (в нем нет даже атрибутов height и width для указания размеров изображений). В отсутствие таблиц и других приемов позиционирования материала колонка текста верстается враспор от левого поля до правого (и, естественно, переверстывается при изменении ширины окна). Иными словами, академический HTML легко приспосабливается к любому разрешению экрана — причем без малейших усилий со стороны автора. Следующая ступень после академического стиля — так называемый «резиновый» дизайн, при котором для размещения текста и изображений уже используются таблицы (стр. 234), но ширина этих таблиц задана не в пикселах, а в процентах от ширины окна. Это позволяет оставлять вокруг текста поля, значительно облегчающие чтение, верстать текст в несколько колонок и достаточно свободно размещать графику. Главное же достоинство «резиновой» страницы — то, что она позволяет столбцам текста свободно
198
растягиваться и сжиматься, тем самым и приспосабливаясь к минимальным (и даже меньше минимальных) размерам экрана, и эффективно используя пространство на экранах шире среднего. Это свойство «резиновых» страниц особенно ценно для контент-сайтов (пример — первая страница сайта www.webreference.com ).
Есть у «резинового» дизайна и недостатки, главный из которых — невозможность точной стыковки графических элементов друг с другом и с переменной ширины колонкой текста (до некоторой степени это преодолимо масштабированием графики, стр. 258). Поэтому самым распространенным сейчас является жесткий табличный дизайн, в котором величина каждой ячейки в пикселах либо задана явно, либо определяется размерами помещенной в эту ячейку графики. Такая страница уже не может свободно растягиваться и сжиматься, поэтому автор должен сам позаботиться о вписывании табличного каркаса композиции в габаритный прямоугольник окна броузера (прежде всего по ширине).
При сужении окна с жесткой страницей за допустимый минимум появляется горизонтальная полоса прокрутки. Если же, наоборот, окно шире страницы, то последняя обычно центруется, за исключением тех случаев, когда материал переднего плана привязан к неподвижному фоновому изображению (стр. 263), — тогда страницу приходится прижимать вплотную к левому краю окна. Если же дизайн ваш настолько требователен, что пустыри полей вокруг островка возделанной земли способны разрушить все впечатление, можно разместить на сплэш-странице сайта маркеры, показывающие пользователю желательные габариты окна и мягко, но настойчиво предлагающие ему, прежде чем двигаться дальше, стянуть поле зрения своего броузера к прямоугольнику нужных размеров (пример 2).
Наконец, если для вашего дизайна имеет значение буквально каждый пиксел, есть еще более эффективный способ управления форматом страницы. Вместо того чтобы озадачивать размерами окна вашего пользователя, ссылка на сплэш-странице, ведущая на главную страницу сайта, может (с помощью JavaScript, стр. 64) сама открывать для этой страницы новое окно броузера с жестко заданными размерами, без обычных элементов управления (меню и кнопок) и без возможности изменять размер этого окна вручную.
Последнее преимущество особенно важно — у такого жесткого окна с гарантией не появится полос прокрутки там, где это не предусмотрено дизайнером (впрочем, иногда, когда автор не учитывает вариации кегля HTML-текста на разных компьютерах, полосы эти все же появляются — и тогда чтение содержимого окна становится сущим мучением). Конечно, таким приемом пользуются лишь подчеркнуто «визуальные» сайты, для которых текстовый доступ к информации (и вообще удобство работы с ней) имеют гораздо меньшее значение, чем безупречный видеоряд (пример 4).