Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы:
Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования страницы HTML-parser-ом. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не помещаются в одной строке. Нарезанная картинка требует совершенно определенного расположения своих составных частей, поэтому простое их перечисление в ряд не дает желаемого эффекта:
Элементы переносятся на новую строку, т.к. ширина раздела меньше общей ширины всех картинок. Проблема решается если применить защиту от parser-а - <pre>:
Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту:
Это можно решить за счет применения атрибута border равного 0:
Теперь попробуем тем же способом реализовать многострочное меню:
Сплошной картинки не получается, т.к. высота строки не равна высоте картинки. Подогнать эти параметры практически нельзя. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов border, cellspacing и cellpadding. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселей, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, равным 0 пикселей.