Позиционирование

Последний

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

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

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

Таблицы и распорки

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

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

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

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

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

Дата добавления: 2015-05-26