Веб-дизайн

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

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

ТАБЛИЦЫ И РАСПОРКИ

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

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

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

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

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

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

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

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

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

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

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