главная / Web-дизайн / Размещение изображения в таблице Размещение изображения в таблицеА теперь разберёмся, как и для чего разрезают картинки и зачем помещают их в таблицы. И какие проблемы при этом могут возникнуть.Для чего разрезают изображения? Ведь проще сразу поместить картинку на страничку! Для этого есть несколько важных причин:
Как правильно резать? Ну вот, зачем резать картинку мы выяснили, теперь перейдём к вопросу - как правильно резать? После того, как мы выберем картинку, предназначенную для нарезки, нужно внимательно её проанализировать и мысленно выделить те области, которые желательно представить отдельными фрагментами. Такими областями могут быть следующие:
Вторым шагом нужно будет нарисовать сетку будущей таблицы таким образом, чтобы мысленно выделенные области попали в отдельные ячейки. Причём, необязательно делать так, чтобы каждый фрагмент картинки попал в отдельную ячейку. Достаточно сделать таким образом, чтобы в одной ячейке можно было разместить несколько картинок - либо все в ряд, либо все в столбик. После того, как мы определили фрагменты, можно приступать непосредственно к нарезке. Удобнее всего это делать, расставив направляющие в 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. Пример правильного кода приведён ниже:
... Если фрагмент должен одновременно служить ссылкой (например, это пункт меню), то изображение нужно заключить в тег <a>, не забывая, что между тегами нельзя оставлять пробелов: <td><a href="http://www.somewhere.com"><img Вот, пожалуй, и всё, что можно сказать о размещении разрезанных картинок в таблице для их корректного показа в любом из броузеров. В следующей статье мы рассмотрим некоторые эффекты, которые можно получить при помощи невидимых таблиц. Источник: cherry-design.spb.ru |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |