Web-инжиниринг
       

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>&lt

    <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>
    В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов border, cellspacing и cellpadding. Первый устраняет границы между ячейками, второй устанавливает расстояние между ячейками равным 0 пикселей, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, равным 0 пикселей.

    Содержание раздела