Table
Графика и таблицы
Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы:
Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования страницы HTML-parser-ом. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не помещаются в одной строке. Нарезанная картинка требует совершенно определенного расположения своих составных частей, поэтому простое их перечисление в ряд не дает желаемого эффекта:
<img src=../images/jsi/topm000.gif><img src=../images/jsi/topm001.gif>...
Элементы переносятся на новую строку, т.к. ширина раздела меньше общей ширины всех картинок. Проблема решается если применить защиту от parser-а - <pre>:
<pre>
<img src=../images/jsi/topm000.gif><img src=../images/jsi/topm001.gif>...
</pre>
Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту:
<pre>
<a href="javascript:void(0);"><img src=../images/jsi/topm000.gif></a><a href="javascript:void(0);"><img src=../images/jsi/topm001.gif></a>...
</pre>
Это можно решить за счет применения атрибута border равного 0:
<pre>
<a href="javascript:void(0);"><img src=../images/jsi/topm000.gif border=0></a><a href="javascript:void(0);"><img src=../images/jsi/topm001.gif border=0></a>...
</pre>
Теперь попробуем тем же способом реализовать многострочное меню:
<pre>
<img src=../images/main/treeup.gif width=20 height=20 border=0><
<img src=../images/main/treetc.gif width=20 height=20 border=0><a href="javascript:void(0);"<>img src=../images/jsi/manual.gif border=0 width=20 height=20></a>
<img src=../images/main/treetc.gif border=0 width=20 height=20><a href="javascript:void(0);"><img src=../images/jsi/desk.gif border=0 width=20 height=20></a>
</pre>
Сплошной картинки не получается, т.к. высота строки не равна высоте картинки. Подогнать эти параметры практически нельзя. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы:
<table cellpadding=0 cellspacing=0 align=center>
<tr>
<td><img src=../images/main/treeup.gif width=20 height=20 border=0></td>
<td><img src=../images/main/blank.gif width=20 height=20 border=0></td>
</tr>
<tr>
<td><img src=../images/main/treetc.gif width=20 height=20 border=0></td>
<td><a href="javascript:void(0);"><img src=../images/jsi/manual.gif border=0 width=20 height=20></a></td>
</tr>
<tr>
<td><img src=../images/main/treetc.gif width=20 height=20 border=0></td>
<td><a href="javascript:void(0);"><img src=../images/jsi/desk.gif border=0 width=20 height=20></a></td>
</tr>
</table>