Позиционирование в CSS

Спецификация CSS1 (стр. 40) была типичным «пожарным» решением, спешной попыткой залатать самые зияющие дыры HTML. Кроме возможности устанавливать поля вокруг объектов, никаких усовершен­ствований на тему позиционирования в этой версии еще не было. В CSS2, однако, разработчики стандарта подошли к делу гораздо серьезнее и реализовали логичный и все­объемлющий набор инструментов, позволяющий свободно размещать материал на плоскости страницы, сняв всякую необходимость пользоваться с этой целью таблицами.

Для начала давайте рассмотрим, чем вообще определяется положение на странице того или иного элемента документа (стр. 27). Язык CSS унаследовал от HTML идею разделения всех элементов, чье содержимое подлежит в той или иной форме выводу на экран, на строчные (inline) и блочные (block). Разница между ними состоит в том, что идущие подряд строчные элементы выстраиваются по горизонтали, переходя на новую строку, только если исчерпано горизонтальное пространство, тогда как блочные элементы располагаются вертикально друг под другом (можно сказать, что каждый блочный элемент начинает собой новый абзац).

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

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

перемещается при переверстке абзаца). Относительное сме­шение объекта не влияет на следующие объекты в цепочке; они ведут себя так, как если бы тот стоял на своем законном месте, — что может приводить, в частности, к наложению объектов друг на друга.

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

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

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

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

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

Глава IV. Веб-графика

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

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

нужно дополнить рассказом о творческих и технологических особенностях графических вставок для веб-страниц.

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

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

Техника

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

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

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

Палитра и диффузия

Как вы уже знаете, большинство графи­ческих вставок на веб-страницах используют формат GIF с его ограниченной максимум 256 цветами палитрой. Огра­ничению палитры, однако, можно придать двоякий смысл: оно может распространяться либо только на количество ис­пользуемых цветов, либо и на количество, и на конкретный их набор. И хотя сам формат накладывает ограничения толь­ко первого рода (стр. 61), принцип «общего знаменателя» заставляет иногда прибегать к некоторой «общепринятой» GIF-палитре с фиксированными цветами. Зачем это нужно? Дело в том, что перевод изображения в ограниченную палитру часто сопровождается диффузией (dithering). При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполня­ются смесью беспорядочно разбросанных пикселов разных цветов. Как правило, каждый отсутствующий в редуциро­ванной палитре цвет передается смесью в нужной пропор­ции пикселов двух самых близких к нему цветов новой палитры. В результате изображение приобретает характер­ную зернистую, шершавую фактуру. Очень часто диффу­зия является единственным способом хоть сколько-нибудь адекватно передать исходные цвета с помощью палитры, на которой этих цветов уже нет (рис. 54).

Рис. 54Диффузия под ми­кроскопом: так Adobe Photo­shop распределяет пикселы при попытке передать черно-белый градиент восьмицветной пали­трой

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

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

Проблема эта действительно серьезна, так как для мно­гих изображений, составляющих нередко основу дизайна страницы, диффузия крайне нежелательна. Что же делать? Оказывается, существует набор из 216 цветов, которые с га­рантией никогда не подвергаются диффузии ни в одном из броузеров и ни на одной из платформ. Если ваше изобра­жение будет содержать только цвета из этого набора (или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь), на 256-цветном экране оно будет выглядеть намного чище и привлекательнее. Эту палитру часто называют «безопасной» (англ. browser-safe palette) или «интернетовской».

Для изображений с преимущественно фотографическими текстурами, которые подвергаются диффузии еще при со­хранении в формате GIF (напомню, однако, что для них разумнее пользоваться форматом JPEG) и для которых

24?

поэтому дополнительная диффузия в броузере уже не страш­на, пользоваться этой безопасной палитрой нет никакого смысла. Однако сколько-нибудь значительные по размеру заливки плоским цветом очень желательно защитить от диффузии. Отсюда, кстати, следует, что комбинированную графику, объединяющую фотографические и плоскоцветные элементы, лучше по возможности разделять на части, чтобы диффузия одной составляющей не затрагивала другой.

Очевидно, что серьезно относящийся к цветовому решению своих работ дизайнер должен позаботиться о цветовой безопасности на самых ранних стадиях проекта. Встроенная или загружаемая «интернет-палитра» есть сейчас во многих векторных и растровых графических программах. Ничто не мешает вам выбирать ее цветовые значения и вручную, пользуясь таким несложным правилом: 216 цветов этой палитры получаются комбинированием красной, зеленой и синей составляющих, каждая из которых может принимать только шестнадцатеричные значения 00, 33, 66, 99, СС и FF (или десятичные 0, 51, 102, 153, 204 и 255). Таким образом, три составляющих, каждая из которых может принимать шесть разных значений, дают б³ = 216 возможных цветов. Диффузия в броузере и безопасная палитра, еще недавно бывшие источ­ником головной боли для веб-дизайнеров, постепенно теряют актуальность по мере того, как устаревают и вымываются из общей массы персональных компьютеров 256-цветные дисплеи. Эту тенденцию нельзя не приветство­вать хотя бы потому, что она открывает перед автором настоящий океан цвета, позволяет выбирать неочевидные, неприевшиеся оттенки. С другой стороны, если какие-то цвета в вашей композиции не несут большой смы­словой или эстетической нагрузки, надежнее округлить их до ближайших значений безопасной палитры.

Те же, кто желает обеспечить одинаковое воспроизведение цветов как на восьмибитных, так и на 24-битных устройствах вывода и при этом не удовлетворен бедностью безопасной палитры, могут воспользоваться по­явившимися недавно утилтами-смесителями (color blenders). Смесители эти производят «гибридные цвета» — заливки, состоящие из расположен­ных в шахматном порядке пикселов двух цветов безопасной палитры. Если не считать некоторой текстурной шероховатости, такой «гибридный» цвет воспринимается как новый, выходящий за безопасные рамки плоский цвет; с другой стороны, будучи составлен из безопасных пикселов, он не изме­няется при отображении на 256-цветных устройствах вывода.

Цветовые границы

Производимое графикой впечатление сильно зависит от того, как в растровом изображении оформле­ны границы областей, закрашенных разными цветами, — или, иными словами, как сложные криволинейные конту­ры изображаемых объектов соотносятся с прямоугольной решеткой пикселов. Особенное значение этот аспект имеет

Рис. 55

Как воспроизвести цветовую границу сложной формы в пиксельной решетке растрового изображения (а) ? Без сглаживания каждый гра­ничный пиксел закрашивается одним или другим цветом в за­висимости от того, по какую сторону границы лежит боль­шая часть его площади (6). Анти-алиасинг вводит для гра­ничных пикселов промежуточ­ные тона, в которых пропор­ция смешения определяется со­отношением площадей цветов, приходящихся на соответству­ющий пиксел (в)

для экранной графики и ее подмножества — графических элементов веб-дизайна: ведь физические размеры пиксела на экране во много раз больше, чем на бумаге.

Очевидно, что случай, когда граница цветов идет стро­го горизонтально или вертикально и при этом совпадает с границей рядов или столбцов пикселов, может быть лишь исключением. В большинстве картинок не обойтись без пикселов, рассеченных «идеальной», векторной цветовой границей на части. Если, к примеру, граница разделяет черную и белую области, то простейший подход будет заключаться в том, чтобы закрашивать такие граничные пикселы черным или белым в зависимости от того, какого цвета на них приходится больше. Этот алгоритм применя­ется тогда, когда невозможно закрасить пиксел каким-либо промежуточным (в данном случае серым) цветом, а сами пикселы малы по размеру — что имеет место, например, при печати на лазерном принтере.

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

Этот метод, называемый сглаживанием контуров, или анти-алиасингом (anti-aliasing), позволяет получить визуально го­раздо более гладкие (но при этом не кажущиеся размыты­ми) цветовые границы, успешно прячущие от восприятия пиксельную структуру экрана. Можно сказать, что анти-алиасинг компенсирует низкую разрешающую способность экрана за счет его более богатой цветопередачи. Так, текст с анти-алиасингом может не только оставаться читабель­ным вплоть до очень мелких размеров (когда каждая буква занимает по десятку пикселов в высоту), но и сохранять в таких размерах характерные графические особенности шрифта (рис. 56).

В то же время в самых мелких кеглях (меньше 5—6 пикселов на высо­ту буквы) от анти-алиасинга лучше все же отказаться, взяв вместо этого особый шрифт, оптимизированный для подобных экстремальных условий (к таким шрифтам относятся, например, большинство системных шрифтов Windows). Лучшие результаты дают шрифты без засечек; конечно, вряд

Рис. 56

Анти-алиасинг в действии: сглаживание конту­ров позволяет не только со­хранить разборчивость текста в мелком кегле, но и передать с помощью буквально несколь­ких пикселов наклон и харак­терные графические особенно­сти шрифта

ли при этом стоит рассчитывать на узнаваемость шрифта, но надпись по крайней мере можно будет прочесть.

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

I цвета.

Кроме того, анти-алиасинг может навредить в изображени­ях, части которых (например, линии регулярной решетки) сопоставимы по размеру с единичными пикселами: такие объекты лучше рисовать уже непосредственно «в растре» инструментами без анти-алиасинга (в Adobe Photoshop, например, для этого подходит инструмент Pencil), а не экспортировать их из векторного оригинала. Это относится, в частности, к пиксельным текстурам (стр. 119) и тонким горизонтальным и вертикальным линиям (стр. 93).

Поиск по сайту: