Веб-дизайн
Шрифт:
ДИНАМИЧЕСКАЯ НАВИГАЦИЯ
Восприятие навигационной панели можно сделать более комфортным, применив простейший анимационный эффект, изменяющий изображение каждой кнопки, когда над ней проходит курсор мыши. Встроенный в страницу 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, и XML — в первую очередь языки разметки текста, и только текстовая часть документов может быть без потерь и с гарантией адекватности перенесена в другие форматы и на невизуальные устройства вывода. А раз текстовое содержимое веб–страницы — основное, тогда как графика и программирование играют (с точки зрения обмена информацией) лишь вспомогательную роль, понятно, то именно для текста нужно в первую очередь обеспечить универсальную доступность.
Рецепт же доступности информации известен давно: для этого нужно отделить логическую основу (в случае текста — просто последовательность символов) от параметров её представления (кегля, шрифта, размещения и пр.), отдав эти параметры на усмотрение пользователя (и, разумеется, дизайнера — но все же оставив за пользователем приоритет). Имея доступ к «тексту как таковому», пользователь и его программы смогут оформить его так, чтобы обеспечить комфортное чтение — с учетом возможностей устройства вывода, условий освещения, личных предпочтений пользователя и многих других обстоятельств, учесть которые заранее дизайнер не смог бы при всем желании.
Если потворство эстетическим прихотям читателей не кажется вам достаточно важным, вспомните, что люди со слабым зрением могут читать текст, только когда он оформлен очень крупным кеглем и контрастным цветом. Для слепых и для тех, кто предпочитает получать информацию во время ходьбы или вождения автомобиля, существуют программы, вслух читающие текстовое содержимое веб–страниц. Не стоит также забывать о всевозможных роботах, автоматических переводчиках и прочих программах, способных осмысленно работать только с той информацией, которая представлена в текстовом виде (стр. 34).
Открытость текста в HTML дает слишком много преимуществ, чтобы от нее можно было отказаться ради милой сердцу дизайнера неизменности внешнего вида документа. С появлением XML принцип открытости и разделения логической и оформительской информации распространяется с текста и на структуру документа. Я уже достаточно писал в гл.1 о важности структурной разметки, поэтому здесь нам достаточно рассмотреть лишь чисто практические следствия, которые для дизайнеров имеет работа с текстом — этим «островком структурности» в довольно–таки непоследовательном и идеологически невыдержанном языке HTML.
Рассмотрим по порядку основные параметры оформления текста (эстетические аспекты которых мы обсуждали в гл. II, стр.138) и соответствующие возможности и ограничения, имеющиеся как у пользователя броузера, так и у создателя страницы.
КЕГЛЬ
Физический размер букв на странице зависит от двух факторов: базового кегля, устанавливаемого в настройках броузера, и относительного размера, выставляемого в HTML с помощью тегов SMALL, BIG и тега FONT с атрибутом size (который может принимать значения от 1 до 7, причем базовому кеглю соответствует size=3). В отсутствие любого из этих тегов текст набирается базовым кеглем; средствами HTML вы можете только отклоняться от этой нулевой отметки в ту или иную сторону.