Web Creation - еженедельный сетевой журнал для вебмастеров

   
Овладей пространством страницы, или искусство ставить распорки

Автор: Дмитрий Кирсанов

Искусство дизайна страницы - это искусство распределения пустого пространства. И хотя WEB-страницы - не совсем то же самое, что страницы книги, это утверждение справедливо и для них. К сожалению, "чистый" HTML, удовлетворяющий всем требованиям стандарта, практически непригоден для управления отступами, спусками и интервалами. В HTML нельзя просто указать горизонтальную и вертикальную координаты для изображения или текстового блока. Можно лишь тем или иным способом отодвигать объекты на странице друг от друга с помощью "пробельного материала", или распорок (STRUTS) - невидимых объектов, которые обладают некими габаритами и влияют на расположение соседних с ними объектов. В этой статье я расскажу о создании и применении различных видов распорок.

Элементарно, Ватсон

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

Иногда для симуляции абзацного отступа рекомендуют ставить в начале абзаца тег <DD> (без предшествующей пары <DT>...</DT> и без внешней пары тегов <DL>...</DL>). Хотя этот трюк дает ожидаемые результаты в NETSCAPE NAVIGATOR, MICROSOFT Internet EXPLORER реагирует на такую ситуацию совсем по-другому.

Аналогично, чтобы быстро создать вертикальную распорку, достаточно поставить подряд несколько тегов <BR> (от слова BREAK, что означает "разрыв строки"), каждый из которых приказывает броузеру перейти на следующую строку, а если текущая строка пуста - вставить вертикальный пробел высотой с обычную строку текста.

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

Пустые таблицы и невидимые изображения

Для многих важных дизайнерских задач, связанных с размещением материала на странице, HTML предлагает единственное (и далеко не самое изящное) решение - таблицы. Можно использовать таблицы и для создания распорок. К сожалению, пустые таблицы не годятся для отступов внутри абзаца, так как тег <TABLE> всегда начинает собой новый абзац. В то же время с помощью пустой таблицы без обрамления (или пустой строки или столбца в таблице) вполне можно позиционировать текстовый блок или изображение.

Размеры пустой таблицы задаются с помощью атрибутов HEIGHT и WIDTH тега <TABLE>. Значения для этих атрибутов можно выражать в процентах, что позволяет создавать распорки, чья величина зависит от ширины или высоты окна броузера. Помните, что даже пустая таблица должна содержать в себе как минимум последовательность тегов <TR><TD></TD></TR>.

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

Однако самым приятным в GIF-распорках является то, что для всех ваших нужд вам будет достаточно всего лишь одного файла размером 1 на 1 пиксел (такой файл занимает ровно 43 байта; позаимствовать копию такой универсальной распорки можно по адресу http://www.design.ru/ttt/empty.gif). Придать распорке нужные размеры можно любым из двух способов: во-первых, масштабировав ее с помощью атрибутов height и width тега <img>, а во-вторых, заказав для этого изображения горизонтальное либо вертикальное поле нужных размеров с помощью атрибутов hspace и vspace того же тега. Последний способ даже предпочтительнее, так как netscape navigator при этом не будет отображать прямоугольный "призрак" изображения в те промежутки времени, когда сам gif-файл еще не подошел из сети, а его будущие размеры, записанные в html- файле, уже известны. (Кстати, не пытайтесь масштабировать изображение до нуля по какой-то из осей; минимальный размер, при котором изображение еще сохраняет свои свойства, - 1 пиксел.)

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

Трюки с индексами

Еще одно малоизвестное свойство HTML, имеющее отношение к позиционированию материала, - это возможность приподнимать и опускать текст внутри абзаца с помощью тегов <SUP>...</SUP> и <SUB>...</SUB>, официально предназначенных для создания верхних и нижних индексов. По умолчанию эти теги не только приподнимают или опускают заключенный в них текст, но и уменьшают кегль шрифта в нем - однако этот дополнительный эффект можно без труда отменить, задав нужный размер вручную. На длину сдвигаемого таким образом текста не накладывается никаких ограничений. Прямо посреди абзаца вы можете включить сдвиг вверх или вниз и выключить его только перед самым концом абзаца. Попробуйте, например, загрузить в броузер такой код:

...начиная с этого места текст <SUB><FONT SIZE=3>сдвигается ниже
<SUB><FONT SIZE=3>и ниже
<SUB><FONT SIZE=3>и ниже
...до конца абзаца.
</FONT></FONT></FONT></SUB></SUB></SUB><P>

Чтобы блюсти приличия, не забывайте закрывать все открытые теги <SUB> и <FONT>. Еще одна интересная возможность, связанная с тегом <SUB>, - это регулировка величины вертикальных отступов. Например, если вы хотите отбить какую-то строку текста от предыдущей и при этом тег <BR> делает слишком маленький вертикальный пробел, а тег <P> (или два тега <BR>) - слишком большой, то вы можете объединить действие тегов <BR> и <SUB>, поставив последний в конце строки, после которой нужен пробел. Например, следующий фрагмент

...верхняя строка<FONT SIZE=2><SUB>&NBSP;<BR>
<FONT SIZE=3>нижняя строка.</FONT></SUB></FONT>

приведет к тому, что между "верхней строкой" и "нижней строкой" появится вертикальный пробел, равный примерно половине пробела, вставляемого после конца абзаца. Символьный код &NBSP; здесь необходим, так как без него тег <SUB> не будет иметь никакого эффекта. Изменяя атрибут SIZE в теге <FONT>, который стоит непосредственно перед <SUB>, вы можете регулировать величину отступа с хорошей точностью. Второй тег <FONT> в этом отрывке восстанавливает исходный кегль шрифта, который был изменен при переходе к "нижнему индексу".

NETSCAPE в своем репертуаре

Существует и еще один способ создания распорок, специфический для броузера NETSCAPE NAVIGATOR. В версии 3.0 этого броузера был введен новый тег <SPACER>, который порождает невидимый объект с определенными значениями ширины, высоты и режимом выравнивания. Если атрибуту TYPE этого тега присвоено значение BLOCK, то ширина и высота создаваемого объекта определяются атрибутами HEIGHT и WIDTH. Кроме того, атрибут TYPE может иметь значение HORIZONTAL или VERTICAL, что дает возможность создавать строго горизонтальные (с нулевой высотой) или строго вертикальные (с нулевой шириной) распорки. При этом как ширина горизонтальных распорок, так и высота вертикальных задаются с помощью атрибута SIZE. К тегу <SPACER> можно добавлять атрибут ALIGN, возможные значения которого (и их смысл) те же, что и у тега <IMG>.

Документация самой фирмы NETSCAPE утверждает, что объект, созданный тегом <SPACER>, ведет себя точно так же, как вело бы себя прозрачное невидимое изображение тех же размеров. Однако это не совсем так. К примеру, если задать TYPE=VERTICAL для распорки, стоящей внутри абзаца, то такая распорка не только сдвинет вниз строку, в которой она находится, но и приведет к насильственному переводу строки в этом месте. Кроме того, похоже, что значения ALIGN=TOP и ALIGN=BOTTOM не оказывают на вертикальные распорки никакого действия.

Автор: Дмитрий Кирсанов

 

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин