Дмитрий Кирсанов - Веб-дизайн

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

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

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

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

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

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

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

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