Чтение онлайн

Понятно, что и для строчных, и для блочных элементов положение на странице будет зависеть от количества и размеров всех предшествующих объектов того же класса. Кроме образования цепочек, объекты обычно выстраиваются еще и в иерархические структуры — так, цепочка строчных элементов может находиться внутри блочного элемента (абзаца или таблицы). Таким образом, «в обычной жизни» координаты элемента определяются двумя факторами: положением элемента — «родителя» и наличием «старших братьев», т. е. элементов, предшествующих данному и имеющих с ним общего родителя.

Теперь вам будет легко понять разницу между двумя основными режимами позиционирования, введенными в CSS2: относительным (relative) и абсолютным (absolute). Относительное позиционирование позволяет смещать объект от тон точки, которую он занимал бы по умолчанию с учетом обоих упомянутых только что факторов. Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы ТЕХ, в котором буква «E» смещена вниз не относительно какой–то точки на странице, а относительно своих соседей. Такой логотип ведет себя как единый строчный элемент (в частности, он свободно перемещается при переверстке абзаца). Относительное смещение объекта не влияет на следующие объекты в цепочке; они ведут себя так, как если бы тот стоял на своем законном месте, — что может приводить, в частности, к наложению объектов друг на друга.

Разновидностью относительного является плавающее (float) позиционирование, при котором объект смещается относительно исходного положения до упора вправо или влево, отодвигая в этом месте текст (а не накладываясь на него). В HTML того же эффекта для изображений можно достичь с помощью атрибута align тега IMG.

При абсолютном позиционировании элемента снимается один из двух указанных факторов: положение объекта вычисляется относительно его «родителя», но без учета «братьев». Иначе говоря, абсолютное позиционирование на самом деле вполне относительно, но отличается тем, что имеет одну и ту же точку отсчета для всех «детей» данного элемента — «родителя». Именно с помощью абсолютного позиционирования обычно реализуется наложение элементов друг на друга, а также всевозможные анимационные эффекта (для которых нужна также поддержка языка сценариев, стр.64).

Разновидностью абсолютного является фиксированное (fixed) позиционирование, при котором элементом — «родителем» считается окно броузера. Это позволяет реализовать в CSS некоторое подобие фреймов (в том числе и с автоматически появляющимися полосами прокрутки), а также фоновые «водяные знаки», остающиеся неподвижными при прокрутке содержимого переднего плана.

Как относительное, так и абсолютное позиционирование могут приводить к наложению элементов друг на друга. По умолчанию видимым остается тот элемент, который 1 ыводится последним, т. е. стоит дальше всего от начала в исходном тексте HTML-документа. Однако автор может управлять видимостью элементов и иначе. Для этого нужно присвоить каждому элементу целое число, обозначающее его координату по «оси Z», направленной перпендикулярно плоскости экрана, — или, иными словами, указать порядковый номер «слоя», в котором находится этот элемент. При наложении видимым будет тот элемент, у которого больше значение свойства z-order, — т. е. тот, который находится «ближе к зрителю».

Оба визуальных броузера поддерживают абсолютное позиционирование начиная с четвертых версий. К сожалению, как и в других компонентах CSS, в реализации этой технологии пока что много ошибок и несовместимости. Причем вместо того, чтобы бросить все силы на доводку своего сырого продукта, создатели Netscape Communicator сочли более важным застолбить новый участок очередным нестандартным тегом. Тег LAYER, хотя и предоставляет ровно те же возможности, что и абсолютное позиционирование средствами CSS, рекламируется фирмой намного активнее (так, вместо термина «absolute positioning» в документации Netscape гораздо чаще употребляется «layers» или «layer technology»). Хотя до сих пор смелое теготворчество давало Netscape известное преимущество в конкурентной борьбе, я сильно сомневаюсь, что кто–то станет пользоваться тегом LAYER при наличии полноценной альтернативы, освященной авторитетом Консорциума W3.

Противопоставление текста и графики в объектах информационного дизайна возникло задолго до появления Интернета и веб–дизайна как отдельного жанра. Вполне естественно, что большинство дизайнеров склонны уделять основное внимание именно графической составляющей своих работ, к сожалению, часто в ущерб не только тексту, но и тому, что связывает текст и графику воедино, — структуре содержимого (стр. 19).

С другой стороны, веб–графика (как и графическая составляющая в любом другом виде дизайна) действительно имеет много специфических черт, невыводимых напрямую из фундаментальных принципов дизайна (которым была посвящена гл. II) и даже из особенностей веб–сайта как единицы информационного дизайна (о которых мы говорили в гл.3). Вот почему материал двух предыдущих глав нужно дополнить рассказом о творческих и технологических особенностях графических вставок для веб–страниц.

Пожалуй, для тех, кого больше интересует практическая сторона веб–дизайна, эта глава может показаться даже важнее двух предыдущих, так как совершенствование графических навыков — самый прямой путь к успеху у заказчиков и собратьев–дизайнеров. Я должен признаться, что обычно держу загрузку изображений в своем броузере выключенной — не потому, что меня так уж сильно ограничивает пропускная способность канала связи, а просто чтобы защитить свое сознание от мутного потока третьесортной графики, затопляющей даже вполне содержательные и с любовью, хотя и не профессионально сделанные сайты. В то же время я не устану повторять, что главное для дизайнера — целостное видение сайта во всех его информационных, художественных и технологических аспектах и что веб–страница может выглядеть более чем профессионально с минимумом графики (и даже вообще без оной).

Первая часть главы содержит обзор графических технологий — применяющихся в Интернете графических форматов, методов оптимизации графики и некоторых других понятий из этой области. В сочетании с соответствующим материалом гл.1 этот раздел даст вам достаточно сведений для того, чтобы разобраться с любой из множества программ подготовки веб–графики, появляющихся сейчас как грибы после дождя. Вторая часть главы представляет собой коллекцию почти не связанных друг с другом эссе о некоторых вполне самостоятельных и характерных именно для веб–дизайна жанрах графики — фонах, логотипах, баннерах и визуалах. Наконец, в третьей части (стр. 290) мы познакомимся с характерными именно для компьютерной графики приемами, из которых я выбрал самые популярные в современном дизайне — имитации трехмерности и растровые эффекты.

В этом разделе нам предстоит изучить некоторые технологические аспекты подготовки графики для веб–страниц. Вы должны уже хорошо разбираться в общекомпьютерных принципах хранения и обработки графики, включая форматы и пиксельную структуру растровых изображений, их отличие от векторных форм представления, глубину цвета и ее влияние на размер изображения и т. п. Все эти понятия мы рассматривали в одном из разделов гл.1 (стр. 55).

Большинство технических особенностей веб–графики вырастают из ограничений интернетовских технологий и принципа «общего знаменателя», о котором мы говорили на стр.177. Так, диффузия и «безопасная палитра» GIF-файлов, равно как и необходимость анти–алиасинга, связаны с ограниченным разрешением и цветовым охватом устройства вывода — компьютерного экрана. Оптимизация же графики, поиск баланса между ее качеством и объемом — мера, вызванная в первую очередь низкой пропускной способностью канала связи. В мире веб–графики есть место и ограничениям третьего рода — ограничениям несовершенных, устаревших и несовместимых стандартов (хотя, конечно, здесь они проявляются в гораздо меньшей степени, чем в технологиях текстовой разметки).

Как вы уже знаете, большинство графических вставок на веб–страницах используют формат GIF с его ограниченной максимум 256 цветами палитрой. Ограничению палитры, однако, можно придать двоякий смысл:

оно может распространяться либо только на количество используемых цветов, либо и на количество, и на конкретный их набор. И хотя сам формат накладывает ограничения только первого рода (стр. 61), принцип «общего знаменателя» заставляет иногда прибегать к некоторой «общепринятой» GIF-палитре с фиксированными цветами.