|
|||
|
|||
Слуга двух господ (Часть IV) |
|||
Михаил Мельников http://www.cherry-design.spb.ru/ А теперь разберемся, как и для чего разрезают картинки и зачем помещают их в таблицы. И какие проблемы при этом могут возникнуть? Для чего разрезают изображения? Ведь проще сразу поместить картинку на страничку! Для этого есть несколько важных причин:
Как правильно резать? Ну вот, зачем резать картинку, мы выяснили, теперь перейдем к вопросу - как правильно резать? После того, как мы выберем картинку, предназначенную для нарезки, нужно внимательно ее проанализировать и мысленно выделить те области, которые желательно представить отдельными фрагментами. Такими областями могут быть следующие:
Вторым шагом нужно будет нарисовать сетку будущей таблицы таким образом, чтобы мысленно выделенные области попали в отдельные ячейки. Причем, необязательно делать так, чтобы каждый фрагмент картинки попал в отдельную ячейку. Достаточно сделать таким образом, чтобы в одной ячейке можно было разместить несколько картинок - либо все в ряд, либо все в столбик. После того, как мы определили фрагменты, можно приступать непосредственно к нарезке. Удобнее всего это делать, расставив направляющие в PhotoShop (или ImageReady) и воспользовавшись инструментом "Crop". Но, подождите еще минутку, важное предостережение - если вы собираетесь резать сложную композиционную картинку, то перед началом желательно перевести все изображение к одной палитре, иначе может оказаться так, что фрагменты изображения будут иметь не совпадающие на краях оттенки цветов. После нарезки (а лучше это делать в процессе) нужно проанализировать каждый фрагмент на предмет нужного для него метода сжатия (GIF или JPEG) и количества необходимых цветов. Одноцветные области можно сразу откидывать, заменив их впоследствии одноцветным однопиксельным GIF-ом. Собираем картинку Ну вот, картинка нарезана, и у нас оказалась целая куча фрагментов, которые нам нужно собрать воедино. Вот теперь мы и воспользуемся таблицей. Для начала мы должны написать каркас. Количество строк и столбцов в таблице должно точно соответствовать их количеству в сетке. Предположим, что мы разрезали изображение таким образом, что получилось 3 строки и 4 столбца. В этом случае каркас будет выглядеть так: <table cellpadding="0" cellspacing="0"
border="0"> Теперь осталось поместить каждый фрагмент изображения в нужную ячейку. При этом нужно следовать одному правилу. Правило заключается в том, что все теги внутри ячейки должны располагаться в одну цепочку, не допуская между собой пробелов и символов перевода каретки. Неправильно<td> <td><a href="http://www.somewhere.com"><img Почему именно так? Все для той же совместимости с Netscape. Дело в том, что любой пробел между тэгами NN воспринимает как некое пространство, имеющее ширину. И как только мы помещаем в таблицу картинку, не соблюдая это правило, так моментально между фрагментами образуется зазор, сквозь который начинает просвечивать фон. Особенно хорошо это видно, если края фрагментов контрастирует с фоном страницы. В Internet Explorer все, разумеется, показывается нормально. В идеале, желательно писать весь код внутри ячейки в одну строчку, и в этом случае никогда не возникнет проблем. Но строчка может оказаться слишком длинной, и это скажется на удобочитаемости кода. В этом случае можно переносить строчки, разрывая их внутри тэгов. Именно так я и поступил в вышеприведенном примере. При помещении картинки в таблицы нужно обязательно прописывать высоту и ширину для каждого фрагмента, чтобы броузер мог начинать отрисовку страницы не дожидаясь, когда скачаются все фрагменты. Также обязательно прописывание атрибутов border="0" и alt. Пример правильного кода приведен ниже:... <td><a href="http://www.somewhere.com"><img Вот, пожалуй, и все, что можно сказать о размещении разрезанных картинок в таблице для их корректного показа в любом из броузеров. В следующей статье мы рассмотрим некоторые эффекты, которые можно получить при помощи невидимых таблиц. |
|||
|
|||
Copyright © "Internet Zone", info@izcity.com | |||
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |