Случалось ли вам при HTML-верстке сталкиваться с необходимостью создания пустых блоков в том или ином месте веб-страницы? Например, нужно было сделать достаточно большой отступ между буквами в слове или между горизонтальными фрагментами текста? Или отгородить навигацию от контента ничем не заполненной колонкой фиксированных размеров? Наверняка, такого рода задачи время от времени вставали перед вами. Вот именно тому, как лучше такие задачи реализовать, а как лучше не стоит, и будет посвящена следующая часть сегодняшнего выпуска.
Если вам нужно сделать между буквами небольшой отступ, равный одному печатному символу, то никаками приемами веб-дизайна можно не пользоваться: в программе верстки просто один раз нажмите клавишу «Пробел/Space» на вашей клавиатуре.
Когда отступ требуется гораздо больше, первый вариант уже не сработает: сколько бы вы не устанавливали пробелов с помощью соответствующей клавиши, браузер все-равно расценит пустое пространство как неразрывный пробел, равный длине одного печатного символа. В этом случае следует использовать специальный тег неразрывного пробела — (Non-Breaking Space). В большинстве случаев многократное указание данного тега практикуется с целью обозначения отступа «красной строки» параграфа, в остальных ситуациях нагромождение не оправдано.
Иногда с целью заострения внимания посетителей сайта на отдельных текстовых фрагментах нужно отделить один информационный блок от другого. Здесь многие веб-мастера допускают ошибку, пытаясь отделить разные смысловые текстовые блоки при помощи тега переноса строки <BR> или (что вообще противопоказано с точки зрения HTML-верстки) упомянутого выше тега (неразрывный пробел). В данной ситуации следует использовать тег параграфа <P></P> с указанием неразрывного пробела внутри. Теперь объясню по порядку, почему не рекомендуется применять прочие средства. Тег <BR> хорош, когда его мало: одно-двухкратное указание данного тега вполне оправдывает свое назначение — простой или двойной перенос строки. Злоупотребление <BR> может сказаться на корректном отображении страницы в различных браузерах (Netscape Navigator в ряде случаев может «прижать» последнюю строку к нижнему краю документа, несмотря на указание <BR> в конце последней строки; обособив текст тегами параграфа <P></P>, вы гарантированно получите желаемый гозонтальный пробел внизу страницы в любом браузере). Использовать же (который по сути предназначен для неразрывных пробелов в пределах одной строки) для горизонтального разделения текстовых блоков — это значит не иметь ни малейшего представления об HTML-средствах текстового форматирования и не экономить драгоценное время веб-мастера.
Другой и, пожалуй, наиболее распространенной ситуацией, требующей физического разделения объектов на странице, можно считать необходимость наличия «пустого» (т.е. без какого-либо визуального содержания) пространства между табличными формами, графикой и простым текстом. Например, мы имеем каркас сайта в виде прозрачной таблицы: в первой колонке идет навигация, в третьей — контент, а средняя колонка ничего не содержит и должна играть роль разделителя навигационного и информационного блоков. Как сделать, чтобы этот разделитель оставался зафиксированным с неизменяющимися шириной и высотой, независимо от размеров окна браузера, модели и версии самого браузера, разрешения экрана и количества используемых цветов на компьютере пользователя?
Первый вариант — установить конкретные значения ширины и высоты ячейки — сразу отпадает, ибо Netscape Navigator «не знает» такого атрибута таблицы, как HEIGHT. Даже если атрибут высоты нас не интересует, стопроцентной гарантией даже не послужит указание в пределах ячейки тега неразрывного пробела. Во-первых, в зависимости от положения такой ячейки на веб-странице и конкретной модели браузера (а также его версии, что тоже немаловажно), ширина разделительной ячейки может варьироваться; во-вторых, размеры пробела в разделительной ячейке (как, впрочем, и в остальных местах HTML-документа) будут расти параллельно размеру шрифта, установленному по умолчанию в браузере пользователя или обозначенному в таблице стилей CSS (т.е., размеры «пустой» ячейки при размере шрифта в 8 и 15 пикселей будут заметно отличаться); в-третьих, как быть, если требуемая ширина «пустой» ячейки гораздо меньше шрифтовых параметров?
Ответ, избавляющий веб-мастера от этой головной боли, предельно прост: в месте «пустых» блоков необходимо использовать графические распорки.
Распорка — это графическое изображение в формате GIF с прозрачной основой и строго фиксированными размерами, выполняющее функцию разделителя, который контролирует «пустое» пространство между различными объектами документа — другими графическими файлами, текстом, табличными формами и т.д. Наличие прозрачной основы делает такую распорку абсолютно невидимой в общей компоновке страницы, а обязательное указание значений ширины и высоты изображения позволяет избегать искажений макета HTML-документов даже в том случае, если распорка по каким-либо причинам не была загружена браузером (низкая скорость передачи данных, ошибка сервера, неправильный путь к файлу, отключенная опция графической поддержки в браузере пользователя и др.). Разумеется, в случае невозможности загрузки графической распорки на странице будут видны границы предполагаемого объекта, однако, если учесть, что распорки чаще всего имеют минимальное значение пар характеристик «ширина-высота», то визуальный результат такой ошибки будет сведен к нулю, а функция распорки все-равно будет выполнена по своему назначению.
Наиболее распространенной ошибкой при подготовке графических распорок является отсутствие прозрачной основы. Однако, следует помнить, что распорка с цветной основой, аналогичной, к примеру, цвету заднего фона страницы, может сослужить вам дурную службу: при цветовом режиме монитора High Color цветная распорка и background документа будут совпадать, чего никак нельзя будет утверждать при палитре в 256 цветов.
