Помощничек
Главная | Обратная связь


Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

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



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

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

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

 




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

©2015-2020 studopedya.ru Все права принадлежат авторам размещенных материалов.