www.citforum.ru

Сервер содержит море(!) аналитической информации!

Поиск Рубрикатор Новости сервера Учебный центр Книжный магазин
Logo
Mistral.ru
Читать можно не только в онлайне :)
Приглашаем вас посетить
книжный магазин "Мистраль"!
 
mcse
Учебная программа
"Статус MCSE под ключ!"
Занятия начнутся 19 июня!

CITFORUM.RU >>> FTP INTERNET СЕТИ БАЗЫ ДАННЫХ ПРОГРАММИРОВАНИЕ ОПЕРАЦИОННЫЕ СИСТЕМЫ УПРАВЛЕНИЕ КОРПОРАТИВНЫМИ РЕСУРСАМИ HARDWARE ПОЛЬЗОВАТЕЛЯМ И ПРЕПОДАВАТЕЛЯМ РУБРИКАТОР МАТЕРИАЛЫ СЕМИНАРОВ И КОНФЕРЕНЦИЙ ЖЕЛТЫЕ СТРАНИЦЫ ListSoft & Citforum CD ИНТЕРНЕТ-МАРКЕТИНГ О СЕРТИФИКАЦИИ MICROSOFT УЧЕБНЫЕ КУРСЫ КОНФЕРЕНЦИЯ "ИНТЕРНЕТ-МАРКЕТИНГ'99" >>> >

 

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

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

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

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

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

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

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

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

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

После того, как мы определили фрагменты, можно приступать непосредственно к нарезке. Удобнее всего это делать, расставив направляющие в 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>

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

Назад | Содержание | Вперед

 
В начало Наверх Поиск Рубрикатор Новости сервера Учебный центр Книжный магазин
/cgi-bin/Click.cgi>
Быстрый переход >>>
Комментарии: info@citmgu.ru Техмаркет Компьютерс - техника высокого класса Сети и системы связи   Copyright ©
Design by Andre M. Erofeev