Графика и таблицы
Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы:
- горизонтальные и вертикальные меню;
- вложенные меню;
- навигационные графические блоки.
Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования страницы HTML-парсером. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не помещаются в одной. Составные части нарезанной картинки должны быть расположены определенным образом, поэтому простое их перечисление в ряд не дает желаемого эффекта: (открыть)
<IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif">
Рис. 16.1.
Элементы переносятся на новую строку, так как ширина раздела меньше общей ширины всех картинок. Проблема решается, если применить защиту от парсера — <PRE>: (открыть)
<PRE> <IMG SRC="image1.gif"><IMG SRC="image2.gif"><IMG SRC="image3.gif"><IMG SRC="image4.gif"> </PRE>
Рис. 16.2.
Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту: (открыть)
<PRE> <A HREF="javascript:void(0);"><IMG SRC="image1.gif"></A><A HREF="javascript:void(0);"><IMG SRC="image2.gif"></A><A HREF="javascript:void(0);"><IMG SRC="image3.gif"></A><A HREF="javascript:void(0);"><IMG SRC="image4.gif"></A> </PRE>
Рис. 16.3.
Этого можно достичь за счет применения атрибута BORDER равного 0: (открыть)
<PRE> <A HREF="javascript:void(0);"><IMG SRC="image1.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image2.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image3.gif" BORDER="0"></A><A HREF="javascript:void(0);"><IMG SRC="image4.gif" BORDER="0"></A> </PRE>
Рис. 16.4.
Теперь попробуем тем же способом реализовать многострочное меню: (открыть)
Пример 16.1.
(html, txt)
Рис. 16.5.
Сплошной картинки не получается, так как высота строки не равна высоте картинки. Подогнать эти параметры практически невозможно. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы:(открыть)
Пример 16.2.
(html, txt)
Рис. 16.6.
В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов.
