Главная / Документы / Web-дизайнерСтатьи

[Добавить сайт в избранное]  

[предыдущая]            [следующая]

Слуга двух господ: IE и NN (2 часть)

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

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

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

  • при загрузке страницы все ее элементы качаются броузером параллельно. Таким образом, одна картинка размером 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>

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

 

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

Рассмотрим следующие, наиболее часто применяемые эффекты, реализуемые при помощи таблиц:

Верстка текста в несколько колонок

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

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

Но для примера мы ограничимся простой версткой в две колонки:

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

А вот и код для такой верстки:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">Здесь располагается текст левой колонки.</td>
<td>&nbsp;</td>
<td valign="top">Ну а здесь текст правой колонки.</td>
</tr>
</table>

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

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

Обратите внимание на атрибут valign="top", прописанный для ячеек, содержащих текст. Как правило, колонки редко бывают заполнены одинаковым объемом текста и в этом случае одна колонка становится короче другой. И чтобы текст в короткой колонке не уполз вниз, мы используем атрибут valign, который прижимает текст в колонках к верху ячейки.

Цветные подложки под текст

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

<table border="0" cellpadding="10" cellspacing="0" bgcolor="#ffff99">
<tr>
<td>Здесь располагается фрагмент текста.</td>
</tr>
</table>

Цвет подложки мы можем задавать, используя атрибут bgcolor для таблицы. А чтобы текст на подложке не "прилипал" к границам, мы установим зазор при помощи атрибута cellpadding. Вот, в общем-то, и все, что требуется. И результат будет выглядеть вот так:

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

Рамка вокруг фрагмента текста

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

<table width="368" cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="10" cellspacing="1" border="0">
<tr>
<td bgcolor="#ffffff">Здесь располагается фрагмент текста</td>
</tr>
</table>
</td></tr></table>

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

Посмотрите, текст в рамке обращает на себя внимание не меньше, чем подложка. А ведь можно еще и совместить эти способы!

Применение фоновых рисунков

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

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

В общем случае проблема заключается в том, как ячейки наследуют фон таблицы. Internet Explorer просто рассматривает ячейки как прозрачные по отношению к фону и никак не изменяет внешний вид фонового изображения. А вот Netscape Navigator рассматривает фон в каждой ячейке как совершенно независимый от фона таблицы и в каждой ячейке прорисовывает фон заново. Это приводит к тому, что фоновое изображение в таблице коверкается невероятным образом.

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

<table background="picture.gif" width="368" cellpadding="0" cellspacing="0" border="0"><tr><td>
<table background="" width="368" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
...
...
...
</table>
</td></tr></table>

Отсутствие атрибута background во внутренней таблице NN воспринимает таким странным образом, что отказывается показывать фон, указанный во внешней таблице. И единственный способ борьбы с этим - именно пустой URL.

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

[предыдущая]            [следующая]

 Главная / Документы / Web-дизайнерСтатьи

[Добавить сайт в избранное]  

Webmaster

Copyright © 2001 Ильнур 

Хостинг от uCoz