
- •Дмитрий кирсанов
- •Глава 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 кодировке Latin-1 (стр. 17) просто нет некоторых позарез нужных для набора даже английского текста символов, а до универсальной поддержки Unicode во всех документах, броузерах, шрифтах и операционных системах пока еще очень далеко. И уж конечно, ничуть не лучше дела обстоят в мире кириллицы с ее многочисленными несовместимыми друг с другом кодировками.
Первым приходящий в голову способ вызвать нужный в тексте, но отсутствующий на клавиатуре символ — посмотреть его номер в каком-нибудь шрифте и сослаться на него из HTML с помощью числовой подстановки (например, написав © для вызова символа копирайта, стр. 29). Однако этот метод очень ненадежен — он полагается, во-первых, на то, что у всех шрифтов на всех платформах этот символ расположен в одной и той же позиции (что далеко не всегда соответствует действительности), а во-вторых, на то, что броузер будет интерпретировать код именно как номер символа в текущем шрифте (что, вообще говоря, противоречит
231
стандарту). Поэтому гораздо предпочтительней пользоваться мнемоническими подстановками (например, &сору; для того же символа копирайта). Однако несовершенство броузеров и сложившаяся (так и хочется сказать «порочная») практика русификации HTML-документов накладывает серьезные ограничения и на этот способ.
• Длинное тире (англ. em dash) как знак препинания не имеет ничего общего с дефисом (hyphen) — в идеале оно должно выглядеть именно так, как в этом предложении. Из кодировок кириллицы (стр. 16) длинное тире есть только у Unicode, CP1251 и кодировки Макинтоша, поэтому им нельзя пользоваться в текстах, автоматически перекодируемых из/в КОИ8 или СР866. Хотя в Windows почти все шрифты (как с кириллицей, так и без) имеют длинное тире по адресу 151 (шестнадцатеричное 97), пользоваться им на законных основаниях нельзя и в английских текстах — в официально предписанной для HTML кодировке Latin-1 (как и в Unicode) это знакоместо объявлено «неиспользуемым» (стр. 17). Увы, пока что единственный стопроцентно надежный способ воспроизвести длинное тире в HTML-тексте — набрать два или три дефиса подряд: -- или ---.
Напомню, что в английском наборе длинное тире должно стоять вплотную к соседним символам, а в русском — отбиваться неразрываемым пробелом слева и обычным справа.
• То же самое можно сказать и о коротком тире (англ. еп dash). В русской типографской традиции этого символа не было, но в английском наборе им принято пользоваться для численных интервалов, например: 1998-2000 (короткое тире не только чуть короче длинного, но и приподнято над строкой до середины высоты цифровых символов). В Windows большинство шрифтов имеют этот символ по адресу 150 (шестнадцатеричное 96); в HTML, однако, его приходится опять-таки имитировать одиночным или двойным дефисом. Надо сказать, что в HTML 4 уже предусмотрены символьные коды — и – для длинного и короткого тире соответственно. Однако ссылаются они на кодовые позиции этих символов в Unicode — и увы, ни MSIE, ни NC в четвертых версиях еще и не думают эти коды поддерживать (хотя MSIE понимает их числовые Unicode-подстановки — и –).
232
• Кавычки — тема, заслуживающая отдельной книги. Всего существует четыре типа кавычек: «французские» (иначе называемые «елочки»), „немецкие" („лапки"), "английские обычные, или двойные," и 'английские одинарные.' В русском языке традиционно применяются французские «елочки», а для «кавычек „внутри" кавычек» — немецкие „лапки". В английском языке пользуются "английскими двойными" для кавычек первого уровня и 'английскими одинарными' для "кавычек 'внутри' кавычек." Соответственно, английские кавычки в русском тексте, так же как и обозначение дюйма " вместо полагающихся кавычек в английском тексте, — следствие либо каких-то технических ограничений при наборе, либо (увы, чаще) необразованности того, кто этот текст оформлял.
К сожалению, в HTML вам вряд ли удастся щегольнуть знанием всех кавычечных тонкостей. В Latin-1 предусмотрены только французские «елочки», для вызова которых стандартный HTML имеет мнемонические подстановки « и ». Однако на практике этими кодами нельзя пользоваться именно там, где они больше всего нужны, — в русском языке: из всех кодировок кириллицы «лапки» есть только в Unicode, CP1251 и в кодировке Макинтоша. И хотя в теории броузер обязан относить мнемонические подстановки к набору символов языка HTML (т. е. Latin-1), а не к текущей кодировке документа, на практике мысль украсить русский текст «елочками» можно оставить до тех пор, пока все броузеры не научатся правильно разбираться с кодировками и мнемоническими подстановками.
Еще печальнее ситуация с немецкими и английскими кавычками. Их нет даже в Latin-1, и надеяться остается лишь на Unicode, — точнее, на ссылающиеся на символы Unicode подстановки „ („), “ ("), ” ("), ‘ (') и ’ ('). Эти символьные коды введены в HTML 4, но еще не поддерживаются графическими броузерами.
Кстати, имейте в виду, что в английском языке точки и запятые принято вносить внутрь кавычек, даже если по смыслу они должны стоять снаружи: "так," а не "так".
• Сравнительно неплохо обстоят дела с символами авторского права (©) и параграфа (§) — они есть и в Latin-1, и в большинстве шрифтов (как с кириллицей, так и без). Для их вызова из HTML можно пользоваться
233
символьными кодами &сору; и § соответственно. Напротив, символ торговой марки (™), также присутствующий в большинстве шрифтов, в Latin-1 отсутствует, так что вместо ™ предпочтительнее писать <SUP><SMALL>tm</SMALL></SUP>.
• Знак номера (№) был заимствован в русский язык из французского, так что в нерусифицированных шрифтах (чей набор символов ориентирован больше на англоязычную типографию) он отсутствует. (В Unicode он есть, но символьного кода в HTML 4 для него не предусмотрено.) Тем не менее символ этот присутствует во всех кодировках русского языка, и если вы ориентируетесь только на русскоязычную аудиторию и при этом вполне уверены в способности автоматического перекодировщика на вашем сервере правильно обрабатывать этот символ, им можно пользоваться просто как буквой (т. е. вставлять его в текст напрямую, без каких бы то ни было конструкций языка HTML).