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

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

и оформления.

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

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

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

Преграды и препоны

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

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

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

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

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

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

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

От общего к частному

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

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

Типы сайтов

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

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

Первый шаг

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

Рис. 46

Примерное распре­деление четырех основных ти­пов сайтов на диаграмме «ди­зайн—содержание». Обратите внимание, что по горизонтали и вертикали отложена слож­ность, а никак не качество ди­зайна и содержания соответ­ственно. В противном случае пришлось бы поменять места­ми \ и 1 по горизонтали, а 2 и 3 — по вертикали

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

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

В мире.org

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

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

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

Скорей любите нас

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

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

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

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

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

Бесплатный сыр

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

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

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

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

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

и привлечения посетителей на свои собственные корпора­тивные сайты.

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

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

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

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

Неупорядоченный континуум

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

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

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

Топология сайта

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

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

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

Рис. 47

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

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

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

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

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

Распределение материала

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

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

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

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

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

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

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

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

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

Фреймы и окна

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

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

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

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

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

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