- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Позиционирование в css
Спецификация CSS1 (стр. 40) была типичным «пожарным» решением, спешной попыткой залатать самые зияющие дыры HTML. Кроме возможности устанавливать поля вокруг объектов, никаких усовершенствований на тему позиционирования в этой версии еще не было. В CSS2, однако, разработчики стандарта подошли к делу гораздо серьезнее и реализовали логичный и всеобъемлющий набор инструментов, позволяющий свободно размещать материал на плоскости страницы, сняв всякую необходимость пользоваться с этой целью таблицами.
Для начала давайте рассмотрим, чем вообще определяется положение на странице того или иного элемента документа (стр. 27). Язык CSS унаследовал от HTML идею разделения всех элементов, чье содержимое подлежит в той или иной форме выводу на экран, на строчные (inline) и блочные (block). Разница между ними состоит в том, что идущие подряд строчные элементы выстраиваются по горизонтали, переходя на новую строку, только если исчерпано горизонтальное пространство, тогда как блочные элементы располагаются вертикально друг под другом (можно сказать, что каждый блочный элемент начинает собой новый абзац).
Понятно, что и для строчных, и для блочных элементов положение на странице будет зависеть от количества и размеров всех предшествующих объектов того же класса. Кроме образования цепочек, объекты обычно выстраиваются еще и в иерархические структуры — так, цепочка строчных элементов может находиться внутри блочного элемента (абзаца или таблицы). Таким образом, «в обычной жизни» координаты элемента определяются двумя факторами: положением элемента-"родителя» и наличием «старших братьев», т. е. элементов, предшествующих данному и имеющих с ним общего родителя.
Теперь вам будет легко понять разницу между двумя основными режимами позиционирования, введенными в CSS2: относительным (relative) и абсолютным (absolute). Относительное позиционирование позволяет смещать объект от той точки, которую он занимал бы по умолчанию с учетом обоих упомянутых только что факторов. Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы TEX, в котором буква «Е» cмещена вниз не относительно какой-то точки на странице, 1 относительно своих соседей. Такой логотип ведет себя как единый строчный элемент (в частности, он свободно
241
перемещается при переверстке абзаца). Относительное смешение объекта не влияет на следующие объекты в цепочке; они ведут себя так, как если бы тот стоял на своем законном месте, — что может приводить, в частности, к наложению объектов друг на друга.
Разновидностью относительного является плавающее (float) позиционирование, при котором объект смещается относительно исходного положения до упора вправо или влево, отодвигая в этом месте текст (а не накладываясь на него). В HTML того же эффекта для изображений можно достичь с помощью атрибута align тега IMG.
При абсолютном позиционировании элемента снимается один из двух указанных факторов: положение объекта вычисляется относительно его «родителя», но без учета «братьев». Иначе говоря, абсолютное позиционирование на самом деле вполне относительно, но отличается тем, что имеет одну и ту же точку отсчета для всех «детей» данного элемента-«родителя». Именно с помощью абсолютного позиционирования обычно реализуется наложение элементов друг на друга, а также всевозможные анимационные эффекты (для которых нужна также поддержка языка сценариев, стр. 64).
Разновидностью абсолютного является фиксированное (fixed) позиционирование, при котором элементом-«родителем» считается окно броузера. Это позволяет реализовать в CSS некоторое подобие фреймов (в том числе и с автоматически появляющимися полосами прокрутки), а также фоновые «водяные знаки», остающиеся неподвижными при прокрутке содержимого переднего плана.
Как относительное, так и абсолютное позиционирование могут приводить к наложению элементов друг на друга. По умолчанию видимым остается тот элемент, который выводится последним, т. е. стоит дальше всего от начала в исходном тексте HTML-документа. Однако автор может управлять видимостью элементов и иначе. Для этого нужно присвоить каждому элементу целое число, обозначающее его координату по «оси Z», направленной перпендикулярнс плоскости экрана, — или, иными словами, указать порядковый номер «слоя», в котором находится этот элемент. Пpи наложении видимым будет тот элемент, у которого больше значение свойства z-order, — т. е. тот, который находится «ближе к зрителю».
242
Оба визуальных броузера поддерживают абсолютное позиционирование начиная с четвертых версий. К сожалению, как и в других компонентах CSS, в реализации этой технологии пока что много ошибок и несовместимостей. Причем вместо того, чтобы бросить все силы на доводку своего сырого продукта, создатели Netscape Communicator сочли более важным застолбить новый участок очередным нестандартным тегом. Teг LAYER, хотя и предоставляет ровно те же возможности, что и абсолютное позиционирование средствами CSS, рекламируется фирмой намного активнее (так, вместо термина «absolute positioning» в документации Netscape гораздо чаше употребляется «layers» или «layer technology»). Хотя до сих пор смелое теготворчество давало Netscape известное преимущество в конкурентной борьбе, я сильно сомневаюсь, что кто-то станет пользоваться тегом LAYER при наличии полноценной альтернативы, освященной авторитетом Консорциума W3.
243