- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Изображения и объекты
Тег IMG, предназначенный для
вставки изображений, относится к тегам, создающим новые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG (стр. 252); этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в другом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атрибутов этого тега управляют форматированием изображения, устанавливая его размеры (стр. 2,5В), поля, выравнивание и проч. Правила использования атрибута alt приведены на стр. 35.
В последующих версиях HTML, вполне вероятно, будет предпринята попытка перейти на использование тега OBJECT для вставки любых внешних по отношению к документу объектов или данных, в том числе и изображений. Обобщенный синтаксис тега OBJECT позволяет указать множество дополнительных сведений об изображении и его роли в документе, а принадлежность этого тега к разряду «парных с игнорируемым содержимым»
32
(стр. 28) обеспечит его обратную совместимость с броузерами, понимающими только тег IMG.
Таблицы
Еще во второй версии HTML не было никаких средств для создания таблиц, если не считать фрагментов «преформатированного» ASCII-текста с сохранением всех пробелов, табуляций и переносов строки. Сейчас, однако, тег TABLE гораздо чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала. Алгоритм верстки таблиц, которому приходится учитывать множество подчас противоречащих друг другу сведений (например, натуральную ширину содержимого ячейки и ту ширину, которая «рекомендована» атрибутом width соответствующего тега TD), достаточно сложен и, к сожалению, плохо задокументирован, — а из-за этого в некоторых своих деталях несовместим у разных броузеров. Использованию таблиц для форматирования основного содержимого страницы посвящен раздел на стр. 234.
Фреймы
Возможность поделить окно броузера на части, загрузив в каждую из «форточек» — фреймов — отдельный HTML-файл, замечательна не столько открывающимися перспективами развития интерфейса сайта, сколько тем фактом, что один HTML-файл получает при этом возможность ссылаться на другие. Таким образом, URL читаемой вами с экрана страницы может совершенно не совпадать с тем адресом, который отображен в строке URL броузера. Это особенно интересно, если учесть, что «просто вставить» внутрь одного файла содержимое другого средствами HTML невозможно (хотя для этого могут использоваться, например, SSI-вставки, стр. 71). Сайты с фреймами нравятся не всем; иногда их критикуют за неудобство и нелогичность навигации. Более серьезными, однако, являются проблемы доступности фреймов для неграфических сред и для автоматических сборщиков информации (программ-роботов поисковых систем, стр. 38). Дизайнерские аспекты работы с фреймами подробно обсуждаются на стр. 188.
Национальные особенности
Хотя с текстовыми кодировками мы уже знакомились (стр. 14), теория и практика создания разноязычных HTML-документов — особая тема. Как я уже упоминал, стандартной кодировкой HTML-документов начиная с версии 4 объявлена кодировка Unicode. Однако это совсем не означает, что все HTML-документы
33
должны создаваться, храниться и передаваться в этой кодировке. Стандарт допускает использование автором страницы любых других кодировок (при условии, разумеется, что набор символов выбранной кодировки соответствует потребностям документа); однако «внутри себя», разбирая синтаксис документа, броузер обязан перекодировать его из внешней, заданной автором кодировки в Unicode.
Для дизайнера это требование имеет, пожалуй, только одно практическое следствие: числовые подстановки (стр. 29) должны ссылаться на Unicode-коды нужных символов, а не на их коды в текущей кодировке документа. Это сделано для того, чтобы не только мнемонические, но и числовые подстановки, во-первых, не зависели от кодировки документа, а во-вторых, давали возможность ссылаться на символы за пределами текущей кодировки. К сожалению, поскольку многие версии броузеров до сих пор не подозревают об этом требовании стандарта, с известной гарантией можно пользоваться только числовыми или мнемоническими кодами из репертуара Latin-1 (которая является подмножеством Unicode).
