Контраст.

«Из всех отношений важнейшим для нас явля­ется  контраст». Если единство и баланс суть условия sine qua поп, фундамент профессионального дизайна, то контраст — перводвигатель, животворящее начало, душа  композиции. Научившись видеть «контраст вокруг нас», вы быстро убедитесь, что именно контрастные отношения лежат в основе производимого впечатления у подавляющего большинства профессиональных работ.

Контраст — это продолжение единства дру­гими средствами. Уходя от идентичности, мы обяза­тельно должны прийти к контрасту — среднего не дано. Разумеется, контраст при таком понимании не может быть только примитивным противопоставлением, лобовым столкновением «черного» и «белого». Как мы скоро увидим, контраст может иметь ступени, оттенки, градации; это не логическая переменная с двумя возможными значениями, а неисчерпаемый, многомерный континуум. Вместе с тем в любом случае существует как нижний предел, за кото­рым вступает в действие запрет на «почти одинаковость», так и верхняя граница, после которой контраст перерождается в бессвязность и разнобой.

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

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

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

                   

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

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

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

Многомерный контраст.  Итак, мы видим, что при постепенном 

углублении различия между объектами по одному из аспектов можно найти некую промежуточную точку, в кото­рой степень субъективного контраста максимальна. Посмо­трим теперь, что происходит, когда несходство в одном из аспектов сопровождается различиями в других.

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

                                   

 

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

Попробуем сопроводить контраст цвета контрастом размера (рис. 42, б). Что произошло? Общий уровень контраста не повысился в два раза, как можно было бы ожидать; скорее наоборот, контраст стал объемнее, глубже и оттого в нашем восприятии — мягче и определенно слабее. Кон­траст в каждом из аспектов получает теперь оправдание в контрасте другого, и в целом связь между элементами упрочивается.

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

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

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

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

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

Одно из лучших упражнений для начинающего дизайне­ра — поаспектный анализ отношений контраста в профес­сиональных работах. Я приведу здесь лишь один пример. В логотипе сайта www.highfive.com (рис. 43 на цвет­ной вкладке) контраст между «Н» и «5» выражен в цвете (как я уже писал, черный образует прочную контрастную связь практически с любым другим цветом) и текстуре (плоский цвет «Н» противопоставлен фотогра­фической, размытой текстуре «5»). В то же время между этими объектами немало общих черт, делающих зву­чание контраста особенно выразительным, — шрифт, кегль, выровненное расположение.

На это отношение накладывается еще одна контрастирую­щая пара — надписи «HIGH» и «five», противопоставленные по цвету, шрифту и регистру букв (прописные/строчные) и смещенные друг относительно друга. Собственно говоря, у этих двух элементов черт сходства почти нет, и вместе они держатся только за счет прочной связи «родительской» пары «Н» и «5».

Аспекты контраста.  Давайте теперь разберемся, как ведет себя 

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

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

Некоторое исключение составляют аморфные и при этом размытые, нечеткие объекты, — которые, вводя одно­временно и новую форму, и новую (фотографическую) текстуру, образуют с плоскоцветными четкими и пря­молинейными фигурами многомерный и потому вполне приемлемый контраст.

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

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

Расположение.  Выравнивание объектов есть проявление единства, а не контраста. Контраст в размещении можно получить, установив либо иерар­хические отношения вложенности одного в другое, либо противолежание по диагонали, т. е. без горизонтального и вертикального выравнивания (хотя в последнем слу­чае придется постараться, чтобы пространственная связь между элементами все же чувствовалась).

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

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

Шрифт. Подбор гармонирующих (что прежде всего озна­чает

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

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

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

 

 

Динамика.

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

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

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

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

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

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

Прежде всего, для любого движения необходимо свободное место, поэтому активно движущийся элемент может потре­бовать перетасовки соседних объектов с тем, чтобы движе­ние не упиралось «лбом в стену», а имело достаточно места для развития. Если позади движущегося объекта свободного

  пространства больше, чем впереди, его движение кажется замедляющимся, подходящим к концу; в обратном случае — ускоряющимся, только что начавшимся. Если же места до­статочно с обеих сторон, движение наиболее активно — его «психологическая скорость» максимальна.

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

Так, на сайте www.chess.ibm.corn  ярко динамичная фигура спортсмена в прыжке задает наклонное направление, поддержанное и зафиксированное наклонной линией горизонта земного шара (то есть все-таки дугой, хотя и большого радиуса,

— вспомните, что я писал  о нежелательности наклонных прямых). Наклон­ность эта поставлена в резкий контраст с горизонтальностью заголовка «the technology» и логотипа «Kasparov vs. Deep Blue», буквально зажавших атлета в тиски и дополнительно усиленных текстурой из горизонтальных полос, наложенной на фотографию.

Ветер по Гауссу. Так же как простая гауссовская раз­мывка обнаруживает свое внутреннее родство с фотографией как классом текстур, размывка со смазыванием (англ. motion blur) великолепно имитирует фотографии дви­жущихся объектов. Этот эффект можно наводить не только на фотографические изображения, но и, что особенно ценно, на более абстрактные объекты, в обычном состоя­нии почти никакой динамики не имеющие, — текстовые заголовки, простые геометрические фигуры.

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

Динамика совсем явная. Конечно, раздел этот был бы неполным без упоминания о самом что ни на есть буквальном воплощении динамики — анимации. Настоящее «фотографическое» видео в Интернете еще не вышло из разряда экзотики, но несложная, по преимуществу плоскоцветная мультипликация (пользующаяся форматом GIF,  популярна необычайно.

Особенно часто анимация (как и остальные виды «явной динамики») используется в рекламном дизайне. Чтобы быть эффективной, реклама должна гораздо жестче и неуклоннее,

чем любой другой носитель информации, вести читателя от   считается побег

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

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

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

веб-страниц, но без большинства их ограничений) показывает, что слишком активная анимация,

 

 

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

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

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

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

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

Почти все сказанное здесь о линиях справедливо и для любого ряда повторяющихся объектов. Всякое повторение вводит явную или неявную линию расположения своих элементов; но в отличие от обычной линии, ряд может до­бавить к мотиву движения мотив развития, изменения своих элементов. Эта тема развития может служить дополнитель­ным двигателем внимания: не всякий станет прослеживать взглядом ряд совершенно одинаковых элементов, но если в ряду заметно постепенное изменение, мгновенно по­является желание заглянуть в конец — «чем же все это кончится?»

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

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

— правый конец которых подвешен в воздухе и потому дополнительно стягивает взгляд. Другой пример: стандартное размещение заголовка над текстом помогает естественному «падению» взгляда от визуально насыщенно­го верха к информационно насыщенному низу.

 

 

Нюансировка.

Последний раздел этой главы —  как и тема, которой он посвящен, — невелик по объему, но необычайно важен. Тщательная нюансировка

— главное отличие работы профессионала от упражнений любителя, пусть даже любителя талантливого.

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

Зачем же нужны мелочи, которые не всякий и заметит? Зачем тратить время на утомительную подгонку, полировку и наведение глянца (а на нюансировку иногда уходит едва ли не половина времени всего проекта), если основная идея композиции уже найдена и если она вполне удовлетворяет всем предъявляемым требованиям?

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

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

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

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

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

Давайте посмотрим, какие виды нюансов чаще всего приме­няются в разных визуальных аспектах дизайна.

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

Особый вид нюансировки размеров и размещения при­меняется для компенсирования всевозможных оптиче­ских иллюзий.

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

Шрифт. Чем крупнее кегль надписи и чем более важную роль она играет на странице, тем более вероятно, что ей потребуется основательная нюансировка. Два самых распространенных вида такой нюансировки — трекинг и кернинг. В логотипах и других особо ответственных надписях иногда приходится вручную перерисовывать некоторые буквы или их части, не укладывающиеся в общий стиль (см. историю переделки буквы Q в логотипе Quiotix).

 

 

Дизайн  веб-сайтов.

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

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

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

Глава эта — более узкая по охвату, чем предыдущая, но одновременно и более практическая и даже более техническая. Здесь вам придется вспомнить многое из того, о чем шла речь в гл. I; говоря, например, об организации материала на веб-странице и ссылаясь при этом на раздел «Размещение» гл. II, я сразу же перечисляю средства позиционирования материала, предусмотренные в HTML и CSS. Это значит, что вы должны быть уже хорошо знакомы с применяемыми в веб-дизайне технологиями и иметь опыт практической работы с ними.

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

Первая группа ограничений определяется намного более низким, по сравнению с печатью на бумаге, разрешением компьютерного экрана — в среднем 96 dpi (dots per inch, пикселов на дюйм) у компьютеров с Windows и 72 dpi у Макинтошей против минимум 300 dpi у самых деше­вых лазерных принтеров. Как вы уже знаете, экранная графика компенсирует свое низкое разрешение более ши­роким цветовым охватом

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

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

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

компьютерные программы, вынуждена подражать гораздо  более древним и консервативным средствам распростране­ния информации.

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

— Расстилается необозримое поле неисследованных возможностей.

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

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

От общего к частному. Веб-сайт как единицу ди­зайна естественно рассматривать на двух уровнях: уровне сайта как целого и уровне отдельной

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

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

 

 

Типы сайтов.

Наше знакомство с веб-дизайном логичнее  всего начать с классификации

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

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

Первый шаг. Самая массовая и самая непритязательная категория веб-сайтов — личные страницы (англ. home pages), по традиции называемые «страницами», хотя многие из них представляют собой полноразмерные сайты.

Обычно личная страница становится первой (и чаще все­го последней) пробой пера тех жителей Интернета, кого перестала удовлетворять пассивная роль зрителя и читате­ля. Конечно, подавляющее большинство эта роль вполне устраивает; тем не менее количество личных страниц сту­дентов и программистов, журналистов и государственных служащих, ученых и псевдоученых, активистов и гомосек­суалистов, даже пенсионеров и грудных младенцев в совре­менном Интернете просто поражает воображение. Не будем обсуждать здесь осмысленность создания и ценность содержания этих страниц (на эту тему я уже высказывался); достаточно заметить, что с точки зрения дизайнера Подавляющее большинство этих страниц никакого интереса не представляет.

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

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

В мире .org. Не столь многочисленная, но куда бо­лее интересная разновидность

веб-сайтов — сайты неком­мерческие, принадлежащие всевозможным добровольным объединениям, временным проектам, международным или благотворительным организациям. К этой же категории можно отнести и многочисленные страницы учебных за­ведений, университетов и научных центров, официальные сайты некоммерческих программных проектов (например, www.lynx.browser.org), а также организаций вроде ISO (www.iso.ch) или Консорциума W3 (www.w3.org).

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

и знает, зачем им это нужно. Результатом этого является логичное и по­следовательное оформление, часто — сознательное использование акаде­мического стиля (который и получил свое название по этому типу сайтов) и, в целом, почти полное отсутствие желания пустить пыль в глаза.

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

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

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

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

Как разновидность коммерческих сайтов особенно интерес­ны сайты самих дизайнерских компаний — оплоты стиля, бастионы «высокой моды», creme de la creme современ­ного веба. Работая над представительством собственной студии, дизайнер решает труднейшую двойную задачу: сайт обязан не только мгновенно завораживать потенциальных заказчиков, но и нравиться собратьям-дизайнерам, отвечать весьма жестким критериям, выработанным современной дизайн-культурой. Вкусы массовой и элитарной аудиторий, их понятия о хорошем и плохом в дизайне различаются весьма значительно; дизайнерам приходится делать не­простой выбор между «попсой» и «высоким искусством», и далеко не всем удается гармонизировать эти два начала. Так или иначе, лучшие сайты профессиональных веб-дизайнеров — бесспорный образец для подражания, и не случайно большинство примеров, собранных в конце моей книги, принадлежат именно к этой категории.

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

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

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

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

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

— информации, содержания, контента.

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

 

 

Устройство сайта.

Слово сайт (англ. site) утвердилось в русской интернетовской терминологии срав­нительно недавно. Раньше, в 1995—1996 годах, в том же или примерно том же значении применялись сочетания «стра­ница WWW», «узел WWW» или «WWW-сервер».

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

Сайт — это набор из нескольких десятков, сотен или даже тысяч веб-страниц

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

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

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

Другое принципиальное отличие веб-сайта от материальных носителей информации

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

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

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

И наоборот, если материал выстраивается в логическую Цепочку — как, к примеру, главы одной книги или

 

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

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

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

Распределение материала. Чем же следует руководство­ваться, разделяя содержимое будущего сайта на отдельные страницы? На первый взгляд ответ очевиден: деление долж­но быть прежде всего логичным, так чтобы каждая страница была посвящена одной теме и чтобы всякая тема занимала  одну и только одну отведенную под нее страницу. Кроме то- r0i нужно учитывать ограничение объема файлов, о котором я уже упоминал  оставляя разумный минимум на графику,

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

Эти простые правила, однако, имеют множество исключе­ний. Если информационные единицы, из которых состоит сайт, слишком мелки, можно объединять на одной странице несколько таких единиц — но только в том случае, если они сравнимы по объему и важности и расположены на одном уровне иерархии. Нередко, особенно на сайтах академиче­ского толка, можно встретить гигантские страницы в сотни килобайт, собравшие всю информацию по какой-нибудь большой теме и образующие иерархию не подчиненных страниц, а подразделов в пределах одного HTML-файла. Это допустимо только в академическом стиле, имеющем достаточно уровней вложенности заголовков (теги HI—Н6) и не обремененном графикой и таблицами (т. е. тем, что способно сильно замедлить загрузку и показ и без того объемистой страницы).

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

Упомяну здесь еще одну интересную черту академических сайтов. Подобно статьям в научных журналах, ссылающимся на другие статьи через спи­сок литературы в конце, некоторые сайты позволяют переходить к другим Ресурсам только в два приема: ссылка в основном тексте ведет не прямо к пункту назначения, а в специальный раздел (или на отдельную страницу) со списком всех внешних ссылок сайта. Это позволяет не загромождать текст лишней информацией и унифицировать оформление ссылок (например, ставить цифры или звездочки вместо названий внешних сайтов);  в списке же можно, наоборот, поместить сколь угодно подробные описа­ния, аннотации и комментарии для каждой ссылки.

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

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

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

Фреймы и окна. Нелинейность информационного про­странства сайта иногда находит свое видимое выражение в использовании фреймов — перегородок внутри окна броузера, позволяющих в образующихся «форточках» показывать несколько

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

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

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

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

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

Еще один, более простой (и исторически появившийся первым) способ вывода на экран компьютера нескольких документов одновременно — создание новых окон броузера. Атрибут target тега А позволяет открывать для документа, к которому ведет эта ссылка, новое окно или же загружать этот документ в любое из уже открытых окон. По умолча­нию вновь созданные окна имеют все атрибуты броузера (строку адреса, кнопки, меню) и ни по внешнему виду, ни по поведению не отличаются от окна-«родителя». С по­мощью JavaScript можно управлять размерами нового окна и даже создавать «голые» окна без каких-либо элементов интерфейса броузера (пример 4). Иногда окна фиксирован­ного размера открываются не для самостоятельных страниц, а для небольших «довесков» информации, которые автор хочет сунуть посетителю прямо под нос, — таких как ре­кламный баннер, подробный адрес фирмы или увеличенная копия изображения, чей «ноготок»  виден на странице.

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

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

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

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

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

Всплеск и вскрик.  Нередко пустота на дизайнерских сайтах столь обильна (опять каламбур), что она не только растекается по всей первой странице сайта, но и выплес­кивается с нее в третье измерение, образуя сплэш-страницу (англ. splash page) — своего рода заставку, прихожую, су­перобложку сайта. Расположенная первой сплэш-страница как правило, не содержит ничего, кроме логотипа фирмы или визуала (часто анимированного), и единственной сво­ей ссылкой, привязанной к этому изображению, ведет на главную (хотя теперь уже не «первую») страницу сайта. На случай, если посетитель не догадается щелкнуть по этой единственной ссылке, тег МЕТА автоматически пе­ренесет его туда спустя какое-то время.

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

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

 

 

Формат страницы.

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

веб-дизайне.

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

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

Все это означает, что понятие разрешения как количества пикселов, приходящихся на единицу физического расстоя­ния (сантиметр или дюйм), в веб-графике можно полностью игнорировать. Работая с изображениями в Photoshop'e или другом растровом редакторе, вы можете не обращать ника­кого внимания на цифры разрешения («resolution») — вас могут интересовать только ширина и высота картинки в пик­селах. Берегитесь сантиметров, дюймов и прочих единиц реального мира — они способны вас только запутать. И все-таки — каково физическое разрешение компьютерного экрана? Хо­тя величина эта меняется из-за множества почти случайных обстоятельств (она зависит не только от паспортного размера экрана дисплея и количества пикселов по вертикали и горизонтали, но и от модели дисплея, положе­ния ручек настройки, иногда даже от положения измеряемой области на экране), традиционно принято считать, что среднее значение разрешения экрана составляет 96 dpi на компьютерах с Windows (в режиме 800x600 на 15-дюймовом мониторе) и 72 dpi на Макинтошах.

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

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

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

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

Общее число пикселов по горизонтали и вертикали обыч­но называют «разрешением» компьютерного экрана, хотя правильнее называть эту величину размером (ведь она измеряется в пикселах, а не в пикселах на дюйм). Величина эта может различаться в разы — от 1600 на 1200 пикселов и выше в самых дорогих графических рабочих станциях до 640 на 480 у графического адаптера VGA, самого старого из все еще применяемых в IBM-совместимых компьютерах. Однако и это значение — 640 пикселов по горизонтали — еще нельзя принимать за искомый минимум: нужно учесть, что любое окно на экране компьютера имеет рамку и (почти всегда) вертикальную полосу прокрутки, а веб-страница в окне броузера окружена определенной величины полями. С учетом всех этих наслоений ширина страницы не должна превышать 600—610 пикселов, а если рассчитывать на поль­зователей со старыми моделями Макинтошей — то и еще меньше, около 580.

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

Оговорка относительно «стандартного HTML» не случайна — очевидно, поля эти были введены именно для того, чтобы размеченные в минима­листском, академическом  стиле тексты можно было читать, не стукаясь взглядом о вплотную прижатую к тексту рамку окна. Предоста­вляя со временем все больше оформительской свободы автору страницы, браузеры не могли обойти своим вниманием и этот аспект. Так, MSIE поддерживает атрибуты leftmargin и topmargin тега BODY, позволяющие

 

устанавливать любую (в том числе нулевую и отрицательную) величину полей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игно­рируют эти «MSIE-only» атрибуты.

Более идеологически правильный, хотя и выходящий за рамки HTML под­ход

— использование CSS-свойств  margin-left и margin-top для тега BODY. К сожалению, упоминавшаяся уже незрелость реализаций CSS  не позволяет воспользоваться даже таким невинным трюком: дело в том, что если MSIE отмеряет поле от рамки окна, то NC принимает за отправную точку то «поле по умолчанию», которое имеет место в отсут­ствие CSS. Поэтому, чтобы прижать содержимое страницы вплотную к ле­вой рамке окна, в MSIE достаточно сказать <B0DY style="margin-left: Орх">, тогда как в NC вместо Орх">, придется подбирать некую отрицатель­ную величину (около -7рх).

Желание обойтись без CSS заставляет некоторых дизайнеров прибе­гать к еще более замысловатому трюку. Пользуясь тем, что у тега FRAME есть поддерживаемые обоими броузерами атрибуты marginwidth и marginheight, они заключают всю страницу в единственный фрейм с тем, чтобы иметь возможность точно устанавливать величину полей.

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

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

К сожалению, иногда стремление к размещению материала «над сгибом» приводит к резкой неоднородности страницы по вертикали — качественная графика и тщательное пози­ционирование вверху сменяются ничем не оправданными

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

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

У голубого экрана. Получившиеся минимальные габариты видимой ча­сти страницы — 580 на 350 пикселов — определяются разрешением экрана массовых персональных компьютеров PC и Макинтош. Однако недавно появилось еще одно устройство для доступа к сети — гибрид компьютера и телевизора под названием WebTV (www.webtv.net). Коробочка с мо­демом, процессором и зашитым в нестираемую память броузером, ценой около 200 долларов, позволяет путешествовать по сети, читая веб-страницы с экрана своего телевизора и выбирая ссылки при помощи пульта дистанци­онного управления (для ввода текста в поля бланков можно присоединить отдельно продающуюся клавиатуру).

Для дизайнера WebTV прежде всего интересен более жесткими ограничени­ями на формат страницы. Размер рабочей части экрана на всех устройствах этого типа один и тот же — 544 на 376 пикселов, и изменить его пользова­тель не может. А хуже всего то, что при более узком, чем у компьютерных броузеров, экране это устройство не позволяет прокручивать страницу по горизонтали — если что-то вылезет за правую границу экрана, оно так и останется недоступным. Очевидно, ограничения WebTV нет смысла учи­тывать в дизайне русскоязычных сайтов, так как в России эти устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже заметный и постоянно увеличивающийся процент.

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

  гораздо менее жестко. Такие страницы не «читаются» и не «просматриваются», а именно рассматриваются как нечто цельное, одноуровневое и одномоментное.

Так, в примере 3 главный визуал страницы — фотогра­фия — смещен вправо и обрезан краем окна именно для того, чтобы у зрителя возникло непреодолимое жела­ние посмотреть — «а что там, за поворотом?» Страница эта открывает собой целый «горизонтальный» сайт и рас­считана на пользователя, который впервые сталкивается с таким необычным размещением материала, — поэтому до­полнительная «стимуляция» с помощью частично видимой фотографии здесь вполне уместна. Результат — из рутинной, почти подсознательной операции промотка окна становится волнующим открытием.

К сожалению, владельцы WebTV не имеют ни малейшей надежды на­сладиться этим изыском дизайна — горизонтальной прокрутки у них нет вообще. Нет ее, кстати, и у встроенных в браузеры функций печати — при попытке распечатать «горизонтальную» страницу оба броузера обрежут ее правый край, оставив видимыми около 800 пикселов ширины.

Ступеньки ригидности.  Интересно проследить, как меняется

отношение страницы к описанным ограничениям формата в зависимости от назначения  сайта и стиля дизайна.

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

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

 растягиваться и сжиматься, тем самым и приспосабливаясь к минимальным (и даже меньше минимальных) размерам экрана, и эффективно используя пространство на экранах шире среднего. Это свойство «резиновых» страниц особенно ценно для контент-сайтов (пример — первая страница сайта www.webreference.com).

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

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

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

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

 

 

Заглавия и заголовки.

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

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

Заглавие.  И все же первое, на что падает наш взгляд, просматривающий   

страницу сверху вниз, — это не графическая вставка и даже не совсем текст, а заглавие, строка в заголовке окна броузера, в исходном коде страницы размеченная тегом  TITLE.

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

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

Не нужно бояться делать заглавия слишком длинными — длинное и подробное, пусть и обрезанное при выводе заглавие лучше, чем короткое и невразумительное. Прочтите свое заглавие и подумайте — достаточно ли оно осмысленно само по себе, вне контекста страницы?

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

Заголовки: логика. После стоящего несколько особняком заглавия

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

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

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

Стандарт HTML не возбраняет помещать между <Н1> и </Н1> не строки текста, а графические изображения заголовков со всеми требуемыми причудами оформления, alt-тексты которых  будут играть роль заголовков в неграфических браузерах. Такое решение — казалось бы, удовлетворительное и с логической, и с визуальной точек зрения — не всегда выполнимо из-за нежелательных вертикальных отступов, которые оба графических броузера оставляют вокруг элементов Н* (из чего бы они ни состоя­ли — из текста или изображений). Единственный законный способ изменять параметры оформления стандартных тегов, включая теги заголовков, — использование CSS; к сожале­нию, из-за несовершенств реализации подавить эти отступы с помощью CSS удается только в одном из броузеров (в MSIE).

Надо сказать, что стандартные заголовки HTML не удо­влетворяют многим требованиям, важным именно для ака­демического типа документов, — так, броузер не может самостоятельно нумеровать их, из них невозможно собрать автоматически обновляемое оглавление документа. Все эти возможности доступны для

XML-документов со стилевыми спецификациями на XSL.

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

  в этой области. Заголовки могут также заимствовать кое- какие приемы и подходы дизайна логотипов.

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

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

Рассмотрим пару примеров. На странице сайта www.bda- web.com  единственным заголовком является, собственно говоря, слово «membership», хотя догадаться об этом непросто — настолько не по-заголовочному оно оформлено (мелкий шрифт, только строчные буквы). В то же время нельзя сказать, что эта строка текста отступает на второй план, — жесткая привязка с помощью гори­зонтальной линии к яркому, доминирующему на странице логотипу и наложение на привлекающую своей загадочной затененностью фотографию делают этот заголовок одним из узловых элементов композиции.

В примере 4 основное содержимое страницы состоит из нескольких заголовков, «сшитых» в единое целое актив­ными вертикальными и горизонтальными линиями, стро­гой системой выравниваний, общим шрифтом и ярким фотографическим фоном (он же визуал), чья второплановость подчеркнута размывкой. Здесь же, кстати, мы видим редкий пример гармонизации вычурного каллиграфически- рукописного шрифта (надпись Tori Amos) с достаточно

  своеобразным, хотя и близким к рубленому шрифтом остальных заголовков.

Разделители.  Непопулярность иерархических систем заголовков совсем

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

Очень часто вместо заголовков следующих уровней на веб-­страницах используются нетекстовые разделители. Академи­ческий HTML предлагает для этой цели тег HR, призванный отделять друг от друга разнородные фрагменты текста. Пы­таясь придать визуальную привлекательность этому, вообще говоря, чисто логическому средству разметки, авторы пер­вого графического броузера Netscape поступили так, как поступил бы на их месте любой дизайнер-любитель: сделали соответствующие этому тегу горизонтальные линейки псев­дотрехмерными — не то выпуклыми, не то вдавленными в плоскость страницы. Создатели MSIE заимствовали этот прием оформления, хотя и в менее «агрессивном» варианте (рис. 48).

 

 

 

Такие разделители могут смотреться пристойно на странице строгого академического стиля, где они будут практически единственным и потому не выбивающимся из общего стиля украшением. Однако как только у страницы появляет­ся собственный дизайнерский замысел и хотя бы минимум оформительской графики, трехмерные линейки почти всегда вступают с этим стилем в жестокий конфликт — ведь даже если в оформлении страницы и используются трехмерные мотивы, они обычно имеют мало общего с невыразительны­ми бороздками HR. Ничто так не обескураживает зрителя, как две конкурирующие в одной композиции «трехмер­ности», различающиеся текстурой, глубиной и характером предполагаемого освещения — и потому неумолимо обнару­живающие «ненастоящесть» друг друга.

Поэтому, сказав «а», создатели броузера Netscape вынуждены были сказать и «б»

— им пришлось сразу же добавить к тегу HR атрибут noshade, дающий простую плоскую ли­нейку без каких бы то ни было украшений (если не считать закругленных концов). Тем не менее даже и плоская, подо­бранная по толщине (атрибут size) и длине (атрибут width) линейка вряд ли станет украшением вашей страницы — и не только с эстетической, но и с логической точки зрения. Очень часто желание поставить <HR> есть верный признак того, что либо визуальная, либо содержательная структура страницы в этом месте недостаточно продумана. Программистам известно, что имеющийся в большинстве языков програм­мирования оператор безусловного перехода GOTO может служить лишь вре­менной «затычкой» в тех случаях, когда автору программы недосуг поискать более элегантный и законный способ передачи управления (оператор ци­кла, вызов подпрограммы). Это хорошая аналогия тегу HR, который тоже употребляется чаше всего тогда, когда недостаточно продуманная структура документа не позволяет оформить тематический водораздел более содержательными и художественно обоснованными средствами.

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

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

С другой стороны, на контент-сайтах (да и не только на них) реклама есть воистину «осознанная необходимость», единственный способ окупить затраты на создание и под­держку сайта. Разумеется, пользователи давно уже привыкли

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

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

 

 

Навигация.

Если нелинейность содержимого — главное  отличие веб-сайта от более традиционных видов публика­ций, то навигационная система есть необходимое каждому сайту средство ориентировки и перемещения в этом не­линейном пространстве. Каждая страница сайта должна, помимо всех прочих предъявляемых к ней требований, отвечать посетителю на два неизбежно возникающих у не­го вопроса — «где я нахожусь?» и «куда мне отсюда  идти?» 

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

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

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

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

HTML-форм, либо,  в последнее время, — с помощью динамического HTML (www.ibm.com). На особо разветвленных древовидных сайтах (www.yahoo.com) каждая страница ссылается на всех своих «родителей» — членов цепочки, ведущей от корня сайта к данной странице.

Для сайтов или фрагментов сайтов с линейной (а не дре­вовидной) структурой необходимый минимум навигации — пара ссылок, ведущих к предыдущему и следующему доку­менту в цепочке. Чаще, однако, линейная навигационная панель включает в себя строку ссылок на все страницы цепочки, указывая в этом ряду место текущей страницы (самый известный пример — ссылки на страницах с ре­зультатами в поисковых системах). Сходно устроены панели управления на сайтах, входящих в тематические «кольца» (web rings), с помощью которых можно перейти на следу­ющий или предыдущий сайт кольца, посмотреть полный список сайтов и даже выбрать один из них наугад (для этого используется перенаправление через специальную програм­му на сайте — хозяине кольца).

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

— общее количество кнопок на панели, которое не должно превышать десяти, а еще лучше семи (как показывают исследования психологов, это «магическое число»

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

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

Привычнее всего выглядит вертикальное (как правило, слева от основного содержимого) расположение панели ма­териалов и горизонтальное (вверху или внизу страницы) — панели инструментов. Иногда на панель инструментов доба­вляют ссылку, ведущую с подчиненных страниц на первую страницу сайта (по-английски она называется «Ноте», по- русски — «В начало» или «К началу»), и кнопку со ссылкой на почтовый адрес автора или владельца сайта («Feedback», «Contact Us» или «Пишите нам»). Если эти две кнопки при­сутствуют, то они обычно занимают в панели крайне левое и крайне правое положение соответственно. Чаще, впрочем, почтовая ссылка включается не в навигационную панель, а в состав блока подписи внизу страницы; для ссылки же на первую страницу сайта нередко «по совместительству» используется изображение логотипа сайта или фирмы, ко­торое большинство сайтов размещают в одном и том же положении на каждой странице.

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

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

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

Для текстовых ссылок автоматизм этот основан на при­вычке: короткие фрагменты текста, выделенные другим цветом и подчеркиванием, настолько прочно ассоциируются в нашем сознании со ссылками, что на веб-сайтах уже нельзя пользоваться подчеркиванием как приемом выде­ления текста (хотя еще пару лет назад текстовые ссылки обычно включали в себя подсказки типа «Click here for...»). В навигационных панелях кнопки также строятся на основе текстовых надписей, но реализованы они в виде графиче­ских вставок, так что «ссылочность» в них подчеркивается (на сей раз «подчеркивается» фигурально, а не буквально) более разнообразными средствами. Совсем не обязательно делать кнопки выпуклыми и прямоугольными, наподобие кнопок интерфейса операционной системы, — однако хоть какой-то намек на особую роль этих элементов все же необходим.

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

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

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

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

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

И наоборот, если страница и без того насыщена фотогра­фическими текстурами и криволинейными формами, имеет смысл вспомнить о популярной в современном дизайне теме прямых линий, часто применяемой для объедине­ния кнопок панели навигации в единое целое. На рис. 50 показаны фрагменты трех последовательных страниц, на­чиная с заглавной, сайта www.revo.com. Мотив прямых линий с засечками на концах, ограничивающих навигаци­онную панель и выделяющих ее на фоне доминирующих на странице плавных дуг и градиентов, вводится уже на первой странице (а). Сайт этот содержит двухуровневую иерархию страниц, и на подчиненных страницах дизайнер из тех же прямых линий строит элегантную и интуитивно прозрачную двухэтажную навигационную панель (б, в).

 

 

 

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

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

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

Иногда вместо рисунков на кнопках можно увидеть ма­ленькие, вырезанные из фона фотографии разных объектов. Особенности восприятия фотографических, реалистичных,  абстрактных символов позволяют им быть гораздо менее

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

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

Особые случаи.  На границе между функциональны­ми и эстетическими особенностями навигационных систем лежит проблема «текущей кнопки» — той ссылки в соста­ве навигационной панели, которая соответствует текущему разделу сайта. Понятно, что ссылок, ведущих с данной страницы на нее же саму, нужно по возможности избегать. Удаление текущей кнопки с панели — не лучший выход, так как это будет сбивать пользователя, уже привыкше­го к определенному порядку кнопок. Разумнее оставить изображение кнопки на месте, просто не делая его ссыл­кой; если, однако, текущий раздел имеет подразделы, не представленные кнопками на панели, на страницах этих подразделов ссылку родительского раздела придется вернуть на место (там она уже не будет указывать сама на себя, — но, к сожалению, у пользователя при этом уже не будет возможности быстро понять, в каком из разделов верхнего уровня он находится).

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

Кроме выделения текущей кнопки иногда может понадо­биться убрать или добавить ссылок на панель в зависимости от контекста текущей страницы. Общую рекомендацию можно сформулировать так: не ленитесь делать разные

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

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

Динамическая навигация.  Восприятие навигационной панели 

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

— вполне уместно Применить и несколько особые методы оформления.

   Кроме классической навигационной панели с графическими кнопками, иногда применяется простейшая разновидность HTML-бланка, состоящая из выпадающего списка с перечислением ссылок и расположенной рядом кнопки «Go» (или «Перейти»). Такой прием хорош своей компакт­ностью: в сложенном виде список занимает гораздо меньше места, чем панель с кнопками. Однако для основных, критических по важности или же неоднородных по охвату ссылок сайта пользоваться им не стоит. Разумнее всего вынести в такого рода меню достаточно длинный и притом часто меняющийся список одноуровневых и близких по тематике разделов (например, список «зеркал» или версий сайта на разных языках). Пара выпадающих списков в комбинации с JavaScript-сценарием позволяет компактно представить двухуровневую иерархию, сделав так, чтобы набор пунк­тов во втором меню зависел от того, какой пункт выбран в первом (пример см. на www.webreference.com).

Динамический HTML делает возможным еще более эффек­тивное представление двухуровневых иерархий — раскры­ваемые оглавления (expandable outlines). Сразу после загрузки страницы такое оглавление представляет собой список раз­делов верхнего уровня, каждый пункт в котором в ответ на щелчок мыши раскрывается, выводя список относящихся к нему подразделов и сдвигая вниз расположенные ниже разделы. Раскрытие другого раздела, как правило, возвраща­ет в исходное состояние предыдущий; иногда предусматри­вают также ссылку, позволяющую раскрыть одновременно все разделы. Этот прием, обеспечивающий компактное и обозримое представление большого количества информа­ции на ограниченной площади страницы, незаменим для контент-сайтов. (В браузерах, не поддерживающих динами­ческий HTML, все списки подразделов будут видны сразу же в раскрытом виде.)

Еще более сложный программистский трюк позволяет ре­ализовать на веб-странице навигационную панель с насто­ящими выпадающими меню (рис. 51). Кроме,

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

с обоими «динамическими» броузерами (NC 4 и MSIE 4), но по мере устаканивания стандартов выпадающие меню на веб-страницах обещают стать столь же повсеместными, как сейчас — обычное перекатывание.

 

 

 

Блоки текста.

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

Однако вполне понятна и мотивация разработчиков бро­узеров, совсем не случайно обеспечивших такие особые условия именно для текста. Текст остается и всегда будет оставаться главным носителем информации в Интернете; и HTML, и XML — в первую очередь языки разметки текста, и только текстовая часть документов может быть без потерь и с гарантией адекватности перенесена в дру­гие форматы и на невизуальные устройства вывода. А раз текстовое содержимое веб-страницы — основное, тогда как графика и программирование играют (с точки зрения об­мена информацией) лишь вспомогательную роль, понятно, что именно для текста нужно в первую очередь обеспечить Универсальную доступность.

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

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

Открытость текста в HTML дает слишком много преиму­ществ, чтобы от нее можно было отказаться ради милой сердцу дизайнера неизменности внешнего вида документа. С появлением XML принцип открытости и разделения ло­гической и оформительской информации распространяется с текста и на структуру документа. Я уже достаточно писал в гл. I о важности структурной разметки, поэтому здесь нам достаточно рассмотреть лишь чисто практические следствия, которые для дизайнеров имеет работа с тек­стом — этим «островком структурности» в довольно-таки непоследовательном и идеологически невыдержанном языке HTML.

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

Кегль.  Физический размер букв на странице зависит от двух факторов: базового кегля, устанавливаемого в настройках броузера, и относительного размера, выставляемого в HTML с помощью тегов SMALL, BIG и тега FONT с атрибутом size (который может принимать значения от I до 7, причем базовому кеглю соответствует size=3). В отсутствие любого из этих тегов текст набирается базовым кеглем; средствами HTML вы можете только отклоняться от этой нулевой отметки в ту или иную сторону.

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

каких-либо технических или эстетических проблем.

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

Лучше всего страница должна выглядеть при том базовом кегле, который ставится по умолчанию (многие пользо­ватели вообще не заглядывают в настройки и не знают, что базовый кегль можно изменить) в браузере, только что установленном на самой распространенной платформе (Windows 95/98) с самым распространенным экранным раз­решением (сейчас в России эта величина составляет 800 на 600 пикселов). При этом страница должна безболезненно выдерживать увеличение базового кегля минимум в два раза.

Особо следует остановиться на видимом отличии размеров букв в разных шрифтах. Пользуясь тегом FONT с атрибутом face (а иногда и строго логи­ческими тегами вроде CODE или SAMP, устанавливающими моноширинный шрифт), вы можете столкнуться с тем, что буквы «чужого» шрифта вы­глядят заметно больше или заметно меньше расположенных рядом букв основного шрифта. В таких случаях нужно удержаться от соблазна вы­ровнять кегли атрибутом size, так как, во-первых, на другом компьютере соотношение размеров может быть прямо противоположным (оно сильно зависит от версий броузеров и установленных на компьютере шрифтов),  а  во-вторых, в случае логических тегов параметры оформления вообще  не должны вас заботить — так, тег CODE нужен, чтобы пометить иденти­фикатор или фрагмент программы, а не для того, чтобы переключиться в Моноширинный шрифт.

CSS  поддерживает как принятый в HTML ме­ханизм ступенчатого увеличения и уменьшения шрифта относительно базового кегля, так и задание кегля в абсо­лютных единицах длины (пикселах, пунктах и т. п.) с помо­щью свойства font-size. CSS уровня 2 добавляет свойство font-size-adjust, с помощью которого можно автомати­чески выравнивать разные шрифты не по «паспортной» величине кегля, а по высоте строчных букв, обеспечивая гораздо лучшее визуальное соответствие размеров разных шрифтов.

Шрифт.  Так же как установка кегля шрифта имеет два аспекта — эстетический (чтоб прилично смотрелось) и приземленно- практический (чтобы можно было читать без рези в гла­зах), — так и выбор гарнитуры и начертания, кроме подробно обсуждавшихся в предыдущей главе художествен­ных требований, должен удовлетворять одному гораздо более важному практическому условию: шрифт дол­жен содержать изображения (глифы) для всех символов, использующихся в тексте. Эта проблема, в свою очередь, распадается на две части: нужно, во-первых, чтобы все тре­буемые глифы действительно были в шрифте, а во-вторых — чтобы кодировки текста и шрифта (по крайней мере, в части используемых символов) совпадали. О текстовых кодиров­ках в HTML и связанных с этим вопросах мы уже говорили в гл. I .

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

Именно эта идея лежит в основе стандартных средств вы­бора шрифта в HTML и CSS. Значением атрибута face тега FONT может быть одно или несколько наименований шрифтов, разделенных запятыми. Броузер, сканируя эту строку, пытается найти хотя бы один из заказанных шриф­тов и включает его для вывода текста документа. Если ни один из них не найден (или если никаких указаний относи­тельно шрифтов в документе не содержится), используется  стандартный системный шрифт (на большинстве операци­онных систем это Times Roman).

CSS уровня I пользуется той же схемой: свойству font- family также можно присвоить в качестве значения строку, состоящую из имен шрифтов, — за тем исключением, что кроме названий конкретных гарнитур можно как один из вариантов (обычно на последнем месте в списке) указать родовой признак нужного шрифта — serif,

sans- serif, monospace и т. п. Не найдя конкретных заказанных шрифтов, броузер будет по крайней мере знать, какой из имеющихся в системе шрифтов следует использовать в данном случае — например, Times (т.е. serif), Arial (sans- serif) или же Courier (monospace).

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

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

Кроме используемого по умолчанию шрифта с засечками, обычно представленного гарнитурой Times Roman, любая графическая операционная система имеет еще два типа шрифтов: рубленый (в Windows — Arial) и моноширинный (в Windows

— Courier). Из них особенно часто в дизай­не применяется рубленый шрифт, для выбора которого, с учетом названий стандартных рубленых шрифтов в раз­ных операционных системах, можно порекомендовать такую запись в HTML:

<F0NT face="Arial,Geneva,Helvetica"> и в CSS:

font-family: Arial,Geneva,Helvetica,sans-serif

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

Коренные шрифты.  Фирма Microsoft решила начать с малого и опубликовала небольшой набор бесплатных шрифтов, оптимизированных для низкого экранного разрешения и предназначенных специально для использова­ния на веб-страницах, без ложной скромности назвав их «Core Fonts for the Web». Поставляемые только в формате TrueType (т. е. пригодные для использования в Windows и на Macintosh), шрифты эти распространяются вместе с броузером MSIE; их можно также скачать и с сервера Microsoft.

Шрифты Microsoft достаточно распространены среди интер­нетовской аудитории для того, чтобы имело смысл указывать их в качестве первого выбора в FONT face и

font-family. Особенно популярен рубленый шрифт Verdana, который, на случай его отсутствия, можно подстраховать приведенным выше стандартным списком рубленых шрифтов. В за­головках «газетного» стиля неплохо смотрится суженный рубленый шрифт Impact.

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

войны.

Все шрифты ношу с собой. Официальная специ­фикация технологии встраивания шрифтов (font embedding), разработанная Консорциумом W3, является частью спецификации CSS уровня 2. CSS не задается вопросом о том, как технология встраивания будет реализована в бро­узерах; спецификация лишь определяет синтаксис, позво­ляющий автору страницы описывать (или просто ссылаться на) нужный шрифт с помощью богатого набора свойств и шрифтовых дескрипторов. Эта информация (включенная либо в сам документ, либо в относящийся к нему стилевой файл) позволит броузеру выбрать, в зависимости от условий, один из следующих вариантов поведения:

 

 

 

 

·         выбор заказанного шрифта (exact matching), если он уже присутствует на данном компьютере;

·         выбор близкого по характеру шрифта (intelligent matching) на основе информации шрифтовых дескрипто­ров — высоты строчных и заглавных, характера засечек, наклона букв и т. п.;

·         синтез нужного шрифта (font synthesis), для чего кроме перечисленных выше общих свойств шрифта нужна так­же метрическая информация о габаритах каждой буквы. Броузер может, к примеру, воспользоваться технологи­ей Multiple Masters фирмы Adobe, позволяющей плавно менять ширину, насыщенность и другие параметры шрифта, и подогнать более-менее подходящий исходный шрифт под метрику требуемого;

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

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

В то же время оба главных визуальных броузера — MSIE и NC — начиная с четвертых версий также поддержива­ют встраивание шрифтов. Технологии, используемые для этого извечными конкурентами, если можно так выра­зиться, гармонически дополняют недостатки друг друга. Броузер Microsoft использует синтаксис CSS2 для связыва­ния шрифтов с HTML-документом, однако может работать только со шрифтами в специально созданном для этого формате «шрифтовых объектов» (основанный на TrueType, этот формат позволяет, в частности, вырезать для отправ­ки только используемые в документе символы, содержит средства сжатия шрифтовых данных и предотвращения не­легального копирования распространяемых шрифтов). При­вязка к «фирменному» формату не только закрывает эту технологию от посягательств конкурентов, но и ограничи­вает ее применимость операционными системами Windows и Macintosh.

Ненамного лучше обстоят дела с открытостью и у техно­логии встраивания шрифтов, разработанной Netscape. Так называемые «динамические шрифты», почему-то реклами­руемые этой компанией как часть ее версии «динамиче­ского HTML», не привязаны к какой-то операционной системе, однако накрепко привязаны к броузеру Netscape Communicator, который один только может использовать для вывода на экран шрифты в формате TrueDoc (лицензи­рованном Netscape у фирмы Bitstream). Более того, привязка шрифта к HTML-документу у Netscape производится со­вершенно ни с чем не совместимым способом — через расширение тега LINK. Если бы

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

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

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

Сейчас на русскоязычных сайтах изредка применяется лишь самое простое из всех шрифтовых решений — переключе­ние в рубленый шрифт, для чего можно написать FONT face="arial cyr,arial". Однако даже этот простейший вариант почти наверняка доставит неприятности многим вашим пользователям, так что лучше всего не искушать судьбу и обойтись для русского текста шрифтом по умолча­нию.

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

Если на странице используется фоновое изображение, ука­зываемый в теге BODY цвет фона должен соответствовать Цвету «среднестатистического» пиксела фонового изображе­ния. Только при этом условии пользователи, отключившие загрузку графики, не будут испытывать затруднений с чте­нием текста, а те, у кого фоновое изображение еще не докачалось, не будут шокированы резким перескоком  цветов в тот момент, когда фон внезапно подстилается под уже видимые элементы переднего плана.

Цвета, указываемые в атрибуте color тега FONT, перекры­вают как цвет из атрибута text тега BODY, так и цветовые установки броузера. Можно даже менять цвет ссылок, вставив тег FONT с атрибутом color внутрь тега A. CSS, в свою очередь, позволяет менять не только цвет букв, но и фо­новый цвет любого элемента, в том числе и фоновый цвет отдельных символов и фрагментов текста. Если часть текста закрашена одним цветом, а часть другим (что обычно бы­вает, когда фон состоит из сильно различающихся по цвету областей — например, светлой центральной части и темной полосы вдоль границы экрана), фоновый цвет в теге BODY должен быть таким, чтобы на нем были легко различимы оба цвета текста.

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

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

Ссылки.  Гипертекстовые ссылки — элемент, не имеющий прямых аналогов в других жанрах дизайна и требующий поэтому особого внимания создателя сайта. Так же как плотность размещения и тщательная взаимная подгонка графических элементов есть признак хорошего качества визуального ди­зайна , о качестве подготовки текста на веб-сайте можно довольно быстро составить впечатление по тому, насколько этот текст насыщен ссылками. Если в этой книге мое стремление отследить все связи глав и разделов сдер­живалось нежеланием загромождать текст бесконечными «стр. такая-то», то на веб-сайте можно дать себе полную волю — ведь гипертекстовые ссылки почти не мешают чтению.

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

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

Общепринятые визуальные атрибуты ссылки — измененный по отношению к основному тексту цвет (о принципах выбора которого мы говорили) и подчеркивание — явно дублируют друг друга. И хотя такое двойное акцентирование помогает ориентироваться в текстовых ссылках быстро и почти подсознательно, подчеркивание все же не стало в массо­вом сознании обязательным признаком гипертекстовой ссылки. Косвенным подтверждением этому может служить тот факт, что в графических ссылках (например, на кнопках навигации) текст почти никогда не снабжается подчеркиванием. Поэтому в последнее время появляется все больше сайтов, отключающих с помощью CSS подчеркивание и для текстовых ссылок (для этого в стилевой спецификации достаточно написать A {text-decoration: none}).

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

 

 

 

 

Стоит сказать пару слов об оформлении абзацев. По тради­ции браузеры не делают отступов красной строки, отделяя абзацы друг от друга вертикальными отступами (как в этой книге). Не прибегая к помощи CSS, можно имитировать более традиционное (с точки зрения книжной верстки) оформление, заменив тег Р между абзацами на BR со сле­дующей за ним горизонтальной распоркой — невидимой графической вставкой или несколькими подряд неразрыва­емыми пробелами   nbsp;). Если, однако, учесть, что того же видимого результата можно добиться с по­мощью CSS (обнулив значение margin и указав отступ красной строки text-indent для тега Р) уже в четвер­тых версиях обоих броузеров, от подобных искусственных приемов лучше воздержаться: членение на абзацы очень важно для информационной целостности текста, и неразум­но жертвовать структурной разметкой этого аспекта ради сиюминутных визуальных выгод.

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

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

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

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

Спецификация HTML 4.0, принятая в начале 1998 года, значительно рас­ширила, по сравнению с предыдущими версиями, набор средств для раз­метки таблиц. Большинство новых тегов и атрибутов предназначены для более адекватной структурной разметки таблиц и для более гибкого пред­ставления табличной информации в невизуальных броузерах. Есть, однако, и усовершенствования в средствах визуального форматирования — в част­ности, атрибуты frame и rules позволяют выборочно проводить линейки между ячейками и вокруг таблицы.

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

Многие дизайнеры относятся с недоверием (вполне, надо признать, обоснованным) ко всем технологиям, выходящим за пределы HTML и GIF, не желая подвергать свое хрупкое творение «капризам погоды» на компьютере пользователя и пользуясь графикой для передачи любого текста, чье оформление небезразлично для производимого страницей художественного впечатления. С точки зрения таких авто- Ров, идеальным форматом для распространения информа­ции в Интернете является не HTML (с этим, впрочем, вряд ли кто-то будет спорить) и не XML, a PDF, у кото­рого нет нескольких конкурирующих программ просмотра,

   но зато есть полная свобода в использовании шрифтов и оформлении текстовых элементов.

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

Перенос текста в графику откровенно противоречит идеоло­гии открытости информации, принятой в HTML и особенно в XML. Тем не менее нельзя сказать, что такой «окаменев­ший» текст навсегда потерян для неграфических броузеров и автоматических сборщиков информации: специально для текстового эквивалента графического изображения пред­назначен атрибут alt тега IMG, в котором вы обязаны дословно воспроизвести весь зашитый в графику текст.

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

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

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

кавычки;

·         до, а не после, открывающей скобки, открывающей кавычки и много­точия в начале предложения;

·         и до, и после длинного тире (в английском языке, наоборот, длинное тире не окружается пробелами).

Никогда не ставится пробел между скобкой или кавычкой и каким-либо другим знаком препинания, кроме длинного тире.

Неразрываемые пробелы. Значительно интерес­нее вопрос о расстановке не обычных, а неразрываемых пробелов. Последовательность символов &nbsp; интерпре­тируется броузером как пробел, не позволяющий разорвать в этом месте строку, и помимо применения в качестве визуальной распорки  должна использоваться для предотвращения неблагозвучных или затрудняющих чтение межсловных переносов. А именно, неразрываемый пробел ставится:

·         между двумя инициалами и между инициалами и фами­лией:   Кирсанов;

·         между сокращенными обращениями и фамилией:   Кирсанов, а также после географических со­кращений типа   Mocквa или  Крым;

·         между знаками номера (№) и параграфа (§) и относящи­мися к ним числами;

·         внутри сокращений «и т. д.», «и т. п.», «т. е.», «ж. д.» и им подобных (хотя английские «e.g.» и «i.e.» пробелами обычно не разделяются);

·         между внутритекстовыми пунктами, такими как «а)», «б)» или «1.», «2.», и следующим за ними текстом;

·         между числами и относящимися к ним единицами измерения:  это же относится и к указаниям дат:

·         перед длинным тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон — неразрываемым слева и обычным справа);

·         между классами многозначных чисел, начиная с пяти­значных:

·         перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений:

·         после однобуквенных предлогов и союзов, особенно в начале предложения или в заголовке.

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

Текстовые выделения.  Пользуясь курсивом или по­лужирным для выделений в тексте, соблюдайте следующие правила:

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

·         знаки препинания, следующие за выделенным фрагмен­том, должны быть набраны основным начертанием.

Спецсимволы.  Отсутствующие непосредственно на клавиатуре символы

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

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

во-первых, на то, что у всех шрифтов на всех платформах этот символ расположен в одной и той же позиции (что далеко не всегда соответствует действительности), а

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

 

 

 

стандарту). Поэтому гораздо предпочтительней пользоваться мнемоническими подстановками (например, &сору; для того же символа копирайта). Однако несовершенство броузеров и сложившаяся (так и хочется сказать «порочная») практи­ка русификации HTML-документов накладывает серьезные ограничения и на этот способ.

Длинное тире (англ. em dash) как знак препинания не имеет ничего общего с дефисом (hyphen) — в идеале оно должно выглядеть именно так, как в этом предложении. Из кодировок кириллицы (стр. 16) длинное тире есть только у Unicode, СР1251 и кодировки Макинтоша, поэтому им нельзя пользоваться в текстах, автоматически перекодируемых из/в КОИ8 или СР866. Хотя в Windows почти все шрифты (как с кириллицей, так и без) имеют длинное тире по адресу 151 (шестнадцатеричное 97), пользоваться им на законных основаниях нельзя и в английских текстах — в официально предписанной для HTML кодировке Latin-1 (как и в Unicode) это знакоместо объявлено «неиспользуемым». Увы, пока что единственный стопроцентно надежный способ воспроизвести длинное тире в HTML-тексте — набрать два или три дефиса подряд: ---  или ---.

Напомню, что в английском наборе длинное тире должно стоять вплот­ную к соседним символам, а в русском — отбиваться неразрываемым пробелом слева и обычным справа.

·         То же самое можно сказать и о коротком тире (англ. еп dash). В русской типографской традиции этого символа не было, но в английском наборе им принято пользо­ваться для численных интервалов, например: 1998—2000 (короткое тире не только чуть короче длинного, но и приподнято над строкой до середины высоты ци­фровых символов). В Windows большинство шрифтов имеют этот символ по адресу 150 (шестнадцатеричное 96); в HTML, однако, его приходится опять-таки имити­ровать одиночным или двойным дефисом.

Надо сказать, что в HTML 4 уже предусмотрены символь­ные коды  для длинного и короткого тире соответственно. Однако ссылаются они на кодо­вые позиции этих символов в Unicode — и увы, ни MSIE, ни NC в четвертых версиях еще и не думают эти коды поддерживать (хотя MSIE понимает их числовые Unicode-подстановки

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

К сожалению, в HTML вам вряд ли удастся щегольнуть знанием всех кавычечных тонкостей. В Latin-1 предусмо­трены только французские «елочки», для вызова которых стандартный HTML имеет мнемонические подстановки  Однако на практике этими кодами нельзя пользоваться именно там, где они больше всего нужны, — в русском языке: из всех кодировок кирилли­цы «лапки» есть только в Unicode, СР1251 и в кодировке Макинтоша. И хотя в теории броузер обязан относить мнемонические подстановки к набору символов язы­ка HTML (т. е. Latin-1), а не к текущей кодировке документа, на практике мысль украсить русский текст «елочками» можно оставить до тех пор, пока все бро­узеры не научатся правильно разбираться с кодировками и мнемоническими подстановками.

Еще печальнее ситуация с немецкими и английскими кавычками. Их нет даже в Latin-1, и надеяться оста­ется лишь на Unicode, — точнее, на ссылающиеся на символы Unicode подстановки  

Эти символьные коды введены в HTML 4, но еще не поддерживаются графическими броузерами.

Кстати, имейте в виду, что в английском языке точки и запятые при­нято вносить внутрь кавычек, даже если по смыслу они должны стоять снаружи: "так," а не "так".

Сравнительно неплохо обстоят дела с символами автор­ского права (©) и параграфа (§) — они есть и в Latin-1, и в большинстве шрифтов (как с кириллицей, так и без). Для их вызова из HTML можно пользоваться  символьными кодами  соответственно. Напротив, символ торговой марки (™), также присут­ствующий в большинстве шрифтов, в Latin-1 отсут­ствует, так что вместо &trade; предпочтительнее писать <SUP><SMALL>tm</SMALL></SUP>.

·         Знак номера (№) был заимствован в русский язык из французского, так что в нерусифицированных шрифтах (чей набор символов ориентирован больше на англо­язычную типографию) он отсутствует. (В Unicode он есть, но символьного кода в HTML 4 для него не предусмотрено.) Тем не менее символ этот присутствует во всех кодировках русского языка, и если вы ориенти­руетесь только на русскоязычную аудиторию и при этом вполне уверены в способности автоматического переко­дировщика на вашем сервере правильно обрабатывать этот символ, им можно пользоваться просто как буквой (т. е. вставлять его в текст напрямую, без каких бы то ни было конструкций языка HTML).

 

 

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

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

веб-технологии для размещения этих элементов на плоскости страницы.

Эстетические принципы построения композиции, показы­вающие зависимость восприятия элемента и его отношений с другими элементами от положения на странице, — иными словами, ответы на вопрос «почему» — были предметом гл. II. Здесь нам остается ответить на вопрос «как», поль­зуясь техническими сведениями, которые вы почерпнули из гл. I (и, вероятно, из вашего личного опыта). Сле­дующая же глава будет целиком посвящена внутреннему Устройству графических элементов, имеющих множество своих собственных технических «как» и эстетических «по­чему».

Вообще говоря, точное позиционирование материала по двум (и даже, как мы увидим ниже, по трем) измере­ниям есть второе по важности из условий творческой свободы дизайнера (первое — возможность пользовать­ся графикой). Характерно, что дизайнер Дэвид Сигель (www.dsiegel.com) — вероятно, самый известный из популяризаторов визуального подхода к веб-дизайну — прославился в первую очередь изобретением невидимой распорки из однопиксельного GIF'a.

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

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

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

поставив подряд соответствующие теги IMG. Прервав этот ряд тегом BR, вы начнете следующую «строку», прилегающую верхним краем самой высокой из картинок к нижнему краю предыдущей «строки». Собственно говоря, поведение графических вставок при этом ничем не отличается от поведения букв в абзаце за тем исключением, что броузер может сам перенести такую «строку» после любой «буквы» (если она грозит вылезти по ширине за край окна или за границу отведенной для нее ячейки); предотвратить перенос можно, заключив строку картинок внутрь <NOBR> ... </NOBR>.

Дурная наследственность. Как уже упоминалось, главным достоинством таблиц является возможность упра­влять положением элементов с точностью до пиксела. Недостатки же этой технологии более разнообразны. Пре­жде всего, хотя содержимое ячеек можно позиционировать относительно друг друга и относительно точки привязки всей таблицы, положение этой последней относительно границ окна броузера, к сожалению, непостоянно и может «плавать» с заметной амплитудой в зависимости от теку­щего размера окна, базового кегля текста, величины полей  и проч.

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

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

Сообщив броузеру заранее ширину и высоту всех размеща­емых в таблице изображений с помощью атрибутов height и width тега IMG, эту задержку можно сильно сократить —

  но только в том случае, если размеры указаны, опять-таки, для всех без исключения изображений. Даже одна графи­ческая вставка неизвестных браузеру размеров задержит вывод всей страницы до тех пор, пока не придет из сети начало соответствующего графического файла, по которому браузер сможет определить его габариты. Поэтому атрибу­ты height и width абсолютно обязательны для жесткого табличного дизайна. В академическом же стиле, наоборот, их следует избегать — как потому, что атрибуты эти не входят в стандарт HTML 2.0, так и потому, что жесткое указание размеров графики иногда не позволяет прочесть alt-тексты графических вставок тем пользователям, ко­торые отключили в своих визуальных браузерах загрузку графики.

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

Двойное дно. Еще один недостаток табличного позици­онирования

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

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

в линейном текстовом эквиваленте страницы определить было бы невозможно.

Белое место.  Возможности табличной верстки были бы сильно ограничены, если бы дизайнер не мог упра­влять расстоянием между содержимым ячеек. Интервалы вокруг всех ячеек одновременно можно менять с помощью атрибутов cellspacing и cellpadding тега TABLE (чаще всего оба эти атрибута обнуляются). Но чтобы раздвинуть на некое заранее заданное расстояние отдельно взятую пару объектов, между ними нужно поставить какую-то распорку.

Общепринятый способ изготовления распорок (тот самый, изобретенный Сигелем) основан на том, что, если указан­ные в атрибутах width и height размеры изображения не совпадают с его естественными размерами (записанными в самом GIF- или JPEG-файле), браузер обязан масштаби­ровать это изображение до размеров, указанных в HTML. Достаточно, таким образом, взять полностью прозрачный GIF-файл минимальных размеров — 1 на 1 пиксел — и при­писать ему требуемую ширину (не забыв указать height=l, чтобы подавить пропорциональное увеличение высоты) или, соответственно, высоту (не забыв width=l) — и мы полу­чим невидимую графическую вставку требуемых размеров, вполне годящуюся на роль распорки.

Достаточно иметь единственную копию такого однопиксельного GIF'a на весь сайт; HTML-файлы могут содержать сколько угодно не мешающих друг другу ссылок на эту копию с указанием разных размеров. Важно также не забы­вать указывать alt="" при всех таких распорках (как и при любой другой служебной графике), чтобы не раздражать «исподним» визуального форматирования тех, кому нужен лишь текстовый образ вашей страницы.

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

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

Для горизонтальной раздвижки символов текста лучше пользоваться не графическими распорками, а неразрывае­мым пробелом. Последовательность символов &nbsp; в любом месте документа (в том числе, кстати, и в заглавии) воспроизводится броузером как одиночный текстовый про­бел, который, в отличие от обычных пробелов, не сливается с соседними пробелами, не исчезает в конце строки и в на­чале абзаца, а главное — не позволяет броузеру вставить перенос строки между символами, вплотную к которым он стоит (отсюда и его название — «неразрываемый пробел» не позволяет разорвать строку).

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

Фэйсом об тэйбл.  Каждый из броузеров имеет свой довольно сложный алгоритм выбора размеров ячеек и раз­мещения материала в них в зависимости от натуральных размеров материала в ячейках, «рекомендованных» размеров ячеек (атрибуты height и width тега TD) и наличия неко­торых особых случаев вроде групп ячеек, объединенных по горизонтали или вертикали (атрибуты colspan и rowspan того же тега). Расследование нюансов, странностей и просто

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

·         Не полагайтесь на «рекомендательные» размеры для от­дельных ячеек; если вам нужно, чтобы ячейка имела определенную ширину и высоту, вставьте в нее соот­ветствующих размеров распорку. Без атрибута width в теге TD нельзя обойтись только тогда, когда нужно ограничить ширину ячейки, содержащей текст (причем результат будет соответствовать ожиданиям, только если текста этого хватает при данной ширине хотя бы на одну полную строку).

Имеет смысл зафиксировать также общую ширину са­мой внешней таблицы, определяющей габариты всей страницы: атрибуту width соответствующего тега TABLE обычно присваивается значение 100% для «резинового» и около 580 пикселов для жесткого табличного дизайна. Более того, без жесткого (в пикселах) зада­ния ширины в теге TABLE таблица, содержащая слитые по горизонтали ячейки, иногда совершенно необъясни­мым образом «распухает», так что ее ширина превосходит сумму ширин распорок во всех ячейках.

·         При необходимости можно сращивать несколько ячеек по горизонтали (атрибут colspan тега TD), но только в том случае, если ширины участвующих в операции столбцов жестко заданы распорками в других ячейках; если же, наоборот, жестко задана только ширина объ­единенной ячейки, на правильное распределение этой ширины между столбцами рассчитывать не приходится. По этой же причине объединять ячейки по вертикали не рекомендуется вообще

— лучше пользоваться вложенны­ми таблицами (рис. 52).

·         В сложных случаях, когда таблица упорно не хочет вести себя как задумано, можно подсветить границы ячеек, заменив в заголовке border=0 на border=l,

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

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

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

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

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

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

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

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

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

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

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

 

 

 

 

 

 

 

 

 

 

Веб-графика.

 

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

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

веб-страниц.

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

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