- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Доступность: таблицы
Описываемые в гл. III приемы верстки веб-страниц с помощью таблиц хотя и считаются иногда «злоупотреблением», несовместимым с духом и буквой HTML, тем не менее вполне допустимы с точки зрения доступности информации, если только при этом соблюдается одно несложное правило. Поскольку таблица в окне броузера двумерна, а текстовый эквивалент страницы одномерен, нужно следить, чтобы логически связанные фрагменты содержимого располагались либо в одной ячейке, либо в ячейках, соседних по горизонтали. Например, если таблица содержит больше одного столбца, нельзя помещать заголовок в одну ячейку, а относящийся к нему текст — в соседнюю снизу, так как в текстовом эквиваленте страницы заголовок и текст будут при этом разделены содержимым других ячеек.
Как писать alt-тексты
Особого внимания заслуживает атрибут alt тега IMG, предназначенный для записи текстового эквивалента изображения. Значением этого атрибута может быть строка символов, содержащая любые подстановки (например, ), но не содержащая других тегов. (Впрочем, сам тег IMG можно вставить внутрь парного тега логического форматирования — например, HI, — чтобы приписать его alt-тексту соответствующую структурную роль и средства выделения в неграфических броузерах.)
Главный принцип, который нужно при этом иметь в виду, формулируется так: alt-текст должен давать текстовый эквивалент информации, содержащийся в изображении, а не некую метаинформацию о самом этом изображении. С этой точки зрения исключительно неуместно смотрятся
36
вставляемые иногда в alt-тексты размеры файлов изображений в байтах или же советы типа «Включите загрузку графики, чтобы увидеть эту картинку». В простейшем случае, когда картинка содержит заголовок, надпись на кнопке или другой текст, ее атрибут alt обязан содержать в точности этот самый текст и ни слова больше. Ниже перечислены некоторые распространенные типы изображений и принципы выбора alt-текстов для них:
• Для распорок (стр. 237) и декоративных элементов, не несущих никакой информации, обязательно указывать пустой alt-текст (alt=""). Как ни странно, этот простейший случай не является значением по умолчанию, так что автор должен сам позаботиться об обнулении alt-текста во всех вспомогательных изображениях.
• Для маркеров элементов списка пользуйтесь или последовательными номерами (в текстовых броузерах и особенно при чтении страницы вслух они сильно облегчают восприятие даже тех списков, которые «в графике» лучше смотрятся без нумерации), или же тем символом, который обычно используется для этой цели в текстовых списках — звездочкой (*).
• Для разделителей, аналогичных по функции тегу HR (стр. 203), подходящим alt-текстом будет ряд небуквенных значков — например, "======" или "******".
С другой стороны, такое решение неплохо смотрится только в текстовых броузерах вроде Lynx, тогда как владельцам речевых броузеров, скорее всего, не очень-то понравится слушать монотонное «знак равенства, знак равенства, знак равенства...»
• Для кнопок панелей навигации (стр. 208) и всех прочих изображений-ссылок разумно принять особое правило оформления alt-текстов (например, я рекомендую заключать их в квадратные скобки). Это следует делать не только для того, чтобы ссылки легко было найти в текстовом эквиваленте страницы, но и для отделения alt-текстов друг от друга: дело в том, что, если графические вставки идут одна за другой без пробелов, их alt-тексты также не будут ничем разделены, если только пробелы или другие символы-разделители не предусмотрены в них самих.
Приведенные здесь правила рассчитаны на то, чтобы облегчить доступ к информации на любых платформах и в любых средах — графической, текстовой или звуковой (стр. 34). В последнее время, однако, графические
37
броузеры несколько переопределили семантику атрибута alt: начиная с четвертых версий броузеры Netscape и Microsoft не только показывают alt-текст на месте отсутствующей графики, но и выводят его в виде «всплывающей подсказки» (floating tip), возникающей при поднесении курсора мыши к изображению. С одной стороны, это нововведение заставит визуальных дизайнеров внимательнее относиться к расстановке alt-текстов на своих страницах — не писать туда что попало и не забывать о пустых alt-текстах у вспомогательных изображений. С другой стороны, непосредственное участие alt-текстов в процессе интерактивного исследования страницы заставляет дизайнера отказаться от дословного воспроизведения в alt-текстах содержимого графических вставок: сейчас не редкость страницы, в которых, например, alt-тексты дают расширенные пояснения для слишком лаконичных или же вообще лишенных текста кнопок навигации.