Динамическая навигация

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

Рис. 51

Выпадающие ме­ню на первой странице сай­та www.ibm.com реализо­ваны с помощью динамического HTML

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

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

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

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

Блоки текста

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

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

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

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

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

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

Кегль

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

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

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

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

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

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

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

Шрифт

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

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

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

стандартный системный шрифт (на большинстве операци­онных систем это Times Roman).

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

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

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

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

<FONT 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.

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

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

Не нашли, что искали? Воспользуйтесь поиском: