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

Table


Графика и таблицы

Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы:

  • Горизонтальные и вертикальные меню

  • Вложенные меню

  • Навигационные графические блоки

    • Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования страницы HTML-parser-ом. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не помещаются в одной строке. Нарезанная картинка требует совершенно определенного расположения своих составных частей, поэтому простое их перечисление в ряд не дает желаемого эффекта:

    <img src=../images/jsi/topm000.gif><img src=../images/jsi/topm001.gif>...

    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table

    Элементы переносятся на новую строку, т.к. ширина раздела меньше общей ширины всех картинок. Проблема решается если применить защиту от parser-а - <pre>:

    <pre>

    <img src=../images/jsi/topm000.gif><img src=../images/jsi/topm001.gif>...

    </pre>

    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table

    Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту:

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

    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table

    Это можно решить за счет применения атрибута 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>

    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table
    Table

    Теперь попробуем тем же способом реализовать многострочное меню:


    <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
    Table


    Table
    Table


    Table
    Table


    Сплошной картинки не получается, т.к. высота строки не равна высоте картинки. Подогнать эти параметры практически нельзя. Каждый пользователь настраивает браузер по своему вкусу. Решение заключается в использовании таблицы:

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

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

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



    Главная сайта