Слуга двух господ (Часть III)

Таблицы, таблицы, таблицы... Ну куда нам без них? В настоящее время ни одна более-менее сложная верстка не обходится без применения таблиц. И опять же нам нужно примирить страничку как с IE, так и с NN.

Начнем с того, что применяются таблицы для верстки не по своему прямому назначению, а лишь как каркас, который позволяет нам относительно свободно манипулировать блоками информации на нашей страничке. Благодаря именно таблицам мы можем создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, точное позиционирование графики, цветные подложки под текст, тонкие линии на всю ширину или высоту странички и т.д.

При использовании таблиц в качестве каркаса нужно скрупулезно соблюдать несколько правил, позволяющих избежать уже известных проблем:

• Даже если таблица будет в одну ячейку, то обязательно прописывайте ее полную форму:

  <table>
  <tr>
  <td><!-- содержимое таблицы --></td>
  </tr>
  </table>
  

• Помещать содержимое таблиц можно только внутри тегов <td></td>. Между <table> и <tr>, а также между <tr> и <td> не должно быть ничего, за исключением пробелов и символа перевода строки.
• Всегда закрывайте табличные тэги. Netscape Navigator не понимает незакрытых таблиц и немедленно вызывает проблемы. Как правило, это проявляется в том, что в IE страничка показывается нормально, а в NN мы видим абсолютно чистую страницу.
• Никогда не оставляйте пустую ячейку. Если нужно, чтобы в ячейке ничего не было, то нужно вместо текста подставить неразрывный пробел &nbsp;. Иначе ячейка в Netscape Navigator будет показана некорректно.
• Выравнивание таблицы по ширине страницы лучше всего производить при помощи внешних, по отношению к таблице, тегов <center></center> и <div></div>, а не при помощи атрибута align в тэге <table>. Также для совместимости с Netscape Navigator.
• Все характеристики, относящиеся к формату ячеек (такие как цвет фона или выравнивание текста) задавать только в тэге <td>. Если какие-то атрибуты относятся ко всей строке таблицы, то их можно задать и в тэге <tr>.
• Воздержаться от использования атрибутов colspan и rowspan, кроме случаев, когда нужно объединить все ячейки в одной строке. Вместо этого лучше пользоваться вложенными таблицами.

Для того, чтобы таблицу можно было использовать в качестве каркаса для странички, в ней нужно прописать нулевые значения атрибутов, задающих толщину рамки и расстояния между ячейками и текстом:

<table border="0" cellspacing="0" cellpadding="0">

Такая таблица будет не видна в броузере, но будет успешно выполнять свои функции. Во время же отладки страницы имеет смысл прописать толщину рамки, равной единице. Это позволит быстро найти ошибку, допущенную при верстке.

Ширина таблицы и ячеек

Как известно, ширину таблицы можно задать либо в абсолютных единицах (пикселях), либо в относительных (проценты). Как, впрочем, и ширину ячейки. Но в отличие от ширины таблицы, которая точно выдерживается обоими броузерами, ширина ячейки подчиняется гораздо более хитрым правилам.

Internet Explorer послушно соблюдает указанную ширину ячейки. Netscape Navigator же принимает указанные значения не более как желаемые рекомендации. Истинную ширину каждой ячейки он рассчитывает после анализа количества текста в соседних ячейках, и в тех, где текста больше, он расширяет ячейку, а где меньше - сужает. Ширина же пустых ячеек стремится к нулю (разумеется, в случае, если весь столбец состоит из пустых ячеек). И, практически, никогда получаемая ширина ячейки не равна значению, указанному в атрибуте width тега <td>.

Из этих рассуждений следует вывод, что использовать атрибут width в качестве надежного средства указания ширины ячейки практически бесполезно. Абсолютно надежным способом для случаев верстки в таблицах с фиксированной шириной является вставка невидимых распорок, получаемых при помощи прозрачного однопиксельного GIF-а. Для "резиновых" таблиц такого надежного способа, к сожалению, нет.

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

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/pic/1x1.gif" height="1" width="100"><br>
<!-- содержимое 1-ой ячейки в первой строке -->
</td>
<td><img src="/pic/1x1.gif" height="1" width="200"><br>
<!-- содержимое 2-ой ячейки в первой строке -->
</td>
</tr>
<tr>
<td><img src="/pic/1x1.gif" height="1" width="100"><br>
<!-- содержимое 1-ой ячейки во второй строке -->
</td>
<td><img src="/pic/1x1.gif" height="1" width="200"><br>
<!-- содержимое 2-ой ячейки во второй строке -->
</td>
</tr>
</table>

Как видите, в данном случае атрибут width в тэге <td> не использовался совсем. Вся работа по фиксации ширины ячейки была выполнена при помощи однопиксельного GIF-а. Обратите внимание, что ширина вставки должна быть одинаковой во всех ячейках одного столбца. А сумма ширин всех вставок в одной строке должна равняться общей ширине таблицы. Кроме того, если Вы заметили, то после вставки однопиксельного GIF-а, идет тег <br>. Его задача заключается в том, чтобы весь текст, который будет находиться в этой ячейке, не повлиял на ее ширину.

Слуга двух господ (Часть IV)

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

Для чего разрезают изображения?

Ведь проще сразу поместить картинку на страничку! Для этого есть несколько важных причин:

• при загрузке страницы все ее элементы качаются броузером параллельно. Таким образом, одна картинка размером 100Кб будет качаться дольше, чем 10 картинок по 10Кб.
• оптимизация. Часто встречаются изображения, на которых очень много одноцветных областей либо областей с небольшим содержанием цветов. В этом случае мы можем оптимизировать каждый фрагмент картинки независимо от остальных. А используя для одноцветных областей однопиксельный GIF соответствующего цвета, можно еще более уменьшить размер картинки.
• для визуальных эффектов типа смены картинки при наведении курсора. Когда мы хотим изменить часть изображения, нам не обязательно грузить всю картинку целиком, достаточно правильно разрезать рисунок. И тогда дополнительно загружать можно будет лишь небольшой фрагмент, соответствующий изменяемой области.
• для организации ссылок на картинках. Есть два способа сделать это.

  Первый - использовать карту изображений. В этом случае где-то в коде мы описываем области изображения, соответствующие ссылкам, и непосредственно сами ссылки. Но эта простота, к сожалению, содержит несколько неприятных особенностей. Во-первых, мы не можем сделать для каждой ссылки свою всплывающую подсказку (ибо она будет общей для всей картинки), и, во вторых, владельцы текстовых броузеров и любители отключать графику не смогут вообще увидеть ссылки, и их придется дублировать где-нибудь при помощи чисто текстовых ссылок.

  И вот тогда мы можем воспользоваться вторым, более сложным способом, свободным от всех этих недостатков. Мы разрезаем картинку таким образом, чтобы области, при нажатии на которые будет осуществлен переход, были бы представлены в виде отдельной картинки (или нескольких картинок).

Как правильно резать?

Ну вот, зачем резать картинку, мы выяснили, теперь перейдем к вопросу - как правильно резать?

После того, как мы выберем картинку, предназначенную для нарезки, нужно внимательно ее проанализировать и мысленно выделить те области, которые желательно представить отдельными фрагментами. Такими областями могут быть следующие:

• одноцветные области;
• области с повторяющимся рисунком и небольшим количеством цветов;
• небольшие фотографические области, для которых может оказаться оптимальным сжатие методом JPEG;
• графические ссылки (типичный пример - меню);
• области, для которых будет осуществлена подмена изображения при помощи скрипта. Типичное применение - изменение части картинки при наведении на меню. Частный случай - изменение вида кнопки меню.

Вторым шагом нужно будет нарисовать сетку будущей таблицы таким образом, чтобы мысленно выделенные области попали в отдельные ячейки. Причем, необязательно делать так, чтобы каждый фрагмент картинки попал в отдельную ячейку. Достаточно сделать таким образом, чтобы в одной ячейке можно было разместить несколько картинок - либо все в ряд, либо все в столбик.

После того, как мы определили фрагменты, можно приступать непосредственно к нарезке. Удобнее всего это делать, расставив направляющие в PhotoShop (или ImageReady) и воспользовавшись инструментом "Crop". Но, подождите еще минутку, важное предостережение - если вы собираетесь резать сложную композиционную картинку, то перед началом желательно перевести все изображение к одной палитре, иначе может оказаться так, что фрагменты изображения будут иметь не совпадающие на краях оттенки цветов.

После нарезки (а лучше это делать в процессе) нужно проанализировать каждый фрагмент на предмет нужного для него метода сжатия (GIF или JPEG) и количества необходимых цветов. Одноцветные области можно сразу откидывать, заменив их впоследствии одноцветным однопиксельным GIF-ом.

Собираем картинку

Ну вот, картинка нарезана, и у нас оказалась целая куча фрагментов, которые нам нужно собрать воедино. Вот теперь мы и воспользуемся таблицей. Для начала мы должны написать каркас. Количество строк и столбцов в таблице должно точно соответствовать их количеству в сетке. Предположим, что мы разрезали изображение таким образом, что получилось 3 строки и 4 столбца. В этом случае каркас будет выглядеть так:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

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

Неправильно

<td>
<a href="http://www.somewhere.com">
<img src="pic/somepic.gif" width="100" height="20" alt="" border="0">
</a>
</td>

Правильно

<td><a href="http://www.somewhere.com"><img
src="somepic.gif" width="100" height="20"
alt="" border="0"></a></td>

Почему именно так? Все для той же совместимости с Netscape. Дело в том, что любой пробел между тэгами NN воспринимает как некое пространство, имеющее ширину. И как только мы помещаем в таблицу картинку, не соблюдая это правило, так моментально между фрагментами образуется зазор, сквозь который начинает просвечивать фон. Особенно хорошо это видно, если края фрагментов контрастирует с фоном страницы. В Internet Explorer все, разумеется, показывается нормально.

В идеале, желательно писать весь код внутри ячейки в одну строчку, и в этом случае никогда не возникнет проблем. Но строчка может оказаться слишком длинной, и это скажется на удобочитаемости кода. В этом случае можно переносить строчки, разрывая их внутри тэгов. Именно так я и поступил в вышеприведенном примере.

При помещении картинки в таблицы нужно обязательно прописывать высоту и ширину для каждого фрагмента, чтобы броузер мог начинать отрисовку страницы не дожидаясь, когда скачаются все фрагменты. Также обязательно прописывание атрибутов border="0" и alt. Пример правильного кода приведен ниже:

...
<tr>
<td><img src="pic/pic-1-1.gif" width="100" height="20"
border="0" alt="фрагмент 1"></td>
<td><img src="pic/pic-1-2.gif" width="100" height="20"
border="0" alt="фрагмент 2"></td>
<td><img src="pic/pic-1-3.gif" width="100" height="20"
border="0" alt="фрагмент 3"></td>
<td><img src="pic/pic-1-4.gif" width="100" height="20"
border="0" alt="фрагмент 4"></td>
</tr>
...

Если фрагмент должен одновременно служить ссылкой (например это пункт меню), то изображение нужно заключить в тэг <a>, не забывая, что между тэгами нельзя оставлять пробелов:

<td><a href="http://www.somewhere.com"><img
src="pic/somepic.gif" width="100" height="20"
alt="" border="0"></a></td>

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