Macromedia Dreamweaver MX

Составные изображения

Теперь поговорим еще об одном применении таблиц. А именно о составных изображениях.

Предположим, вы создали, получили в подарок от знакомого художника или нашли в Сети красивую картину. И теперь хотите поместить ее на сво­ей странице. Конечно, вы уже узнали, как это делается, в главе 4. А теперь предположим, что это не картина, а элемент оформления страницы, ска­жем, красивый заголовок. И этот заголовок содержит в себе несколько по­вторяющихся элементов. (А среди элементов оформления такое случается очень часто.)

Можно сделать так, как вы бы поступили с обычным графическим изобра­жением, т. е. просто поместить его на страницу. А можно поступить иначе, как это часто делают опытные Web-дизайнеры: сделать составное изобра­жение.

Что такое составное изображение? Ничего особенного, просто обычное изо­бражение, но "разрезанное" на части, каждая из которых сохраняется в от­дельном файле. Такие функции предлагаются всеми современными графи­ческими пакетами, такими как Adobe Photoshop или Macromedia Fireworks.

В результате получается набор файлов — набор графических изображений - фрагментов.

Ну и что, скажете вы? Но дело в том, что изображение это режется не на­обум, а таким образом, чтобы количество этих самых файлов-фрагментов было минимально. Возьмем какой-нибудь фрагмент, повторяющийся в изо­бражении несколько раз; если изображение умело разрезать, вместо множе­ства файлов мы будем иметь один-единственный — с этим самым фрагмен­том. За счет этого размеры загружаемого изображения сильно уменьшатся.

Это хорошо заметно на примере, показанном на рис. 5.44. Данный рисунок схематически показывает некое изображение, разрезанное на 30 частей. Од­нако, как видите, некоторые его фрагменты повторяются (их номера про­ставлены в ячейках), а некоторые фрагменты вообще можно исключить. Если бы мы не использовали составного изображения, общий размер загру­жаемой ¥еЬ-обозревателем графики вырос бы в два раза. Так что выигрыш во времени загрузки налицо.

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

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

Проблемы с таблицами и их решение

Напоследок давайте поговорим о том, какие проблемы подстерегают Web - дизайнера, решившего использовать таблицы, и как они преодолеваются.

Общие недостатки таблиц и их преодоление

Итак, поговорим о недостатках таблиц... Да, у HTML-таблиц есть серьезные недостатки. Что ж, в мире нет ничего совершенного!..

О первом недостатке уже говорилось. Это громоздкость и запутанность HTML-кода, используемого для создания таблиц. Но это уже проблемы конкретного Web-дизайнера; в самом деле, необходимо просто аккуратно писать и тщательно документировать HTML-код, чтобы не запутаться в нем. К тому же, для создания таблиц опытные Web-дизайнеры прибегают к помощи визуальных Web-редакторов. Последние, конечно, не столь ин­теллектуальны и артистичны, как человек, но работают не в пример внима­тельнее и аккуратнее.

Второй, и самый существенный, недостаток — очень медленные загрузка и отображение. Дело в том, что многие Web-обозреватели, в частности попу­лярнейший Internet Explorer, просто физически не в состоянии вывести таб­лицу на экран, пока не загрузит ее целиком. А если таблица велика, то... да что вам рассказывать?! Неужели вы не видели в Сети страничек, содержа­щих таблицы совершенно диких размеров? И неужели вам никогда не на­доедало ждать, пока этот монстр соизволит доползти до вас полностью и явится пред ваши очи?

( Примечание )

Разработчики Web-обозревателей Opera и Mozilla утверждают, что эти про­граммы могут выводить таблицы на экран по мере загрузки.

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

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

□ Ранее уже говорилось о гигантах в мире таблиц. А рекомендации будут

Следующими. Прежде всего, не делайте больших таблиц. Если без этого

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

□ Отображение таблицы может сильно замедлиться, если для нее или ее ячеек заданы относительные величины ширины и высоты. При этом Web-обозревателю сначала придется вычислить ширину и высоту родите­ля (самой Web-страницы или ячейки внешней таблицы). А точные зна­чения ширины и высоты родителя он может получить только после того, как закончится обработка всей страницы, т. е. очень и очень нескоро. Здесь рекомендация может быть только одна: по возможности исполь­зуйте абсолютные значения размеров таблиц и ячеек (но именно по воз­можности, а не всегда).

□ Обработка и вывод Web-страницы могут сильно замедлиться, если в ней используются многократно вложенные таблицы. А если еще эти таблицы отформатированы с указанием относительных значений ширины и высо­ты, то... Рекомендации: тщательная проработка структуры таких таблиц и, естественно, оптимизация.

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

□ Иногда Web-обозреватель не может корректно показать ячейку таблицы, если в ней ничего нет, т. е. ее код — <tdx/td>. Особенно этим страдает Navigator. Для решения данной проблемы достаточно поместить внутрь такой ячейки символ неразрывного пробела &nbsp; (как это делает по умолчанию Dreamweaver): <TD>&nbsp;</TD>. Правда, некоторые рекомен­дуют для этой же цели уже знакомый вам "однопиксельный GIF":

CTDXIMG SRC="lxl. gif "X/TD>, НО об ЭТОМ МЫ ПОГОВОрИМ Ш1ЖС.

□ Если HTML-код таблицы содержит ошибки, будьте готовы, что Navigator выведет вам страницу без малейших следов этой самой таблицы. Вообще, Navigator исключительно чувствителен к ошибкам кода, в отличие от его "коллеги" Internet Explorer. Поэтому, если вы предпочитаете редактиро­вать HTML-код таблиц вручную, тщательно проверяйте его на ошибки. А еще лучше: воспользуйтесь специальными программами проверки HTML-кода, которых сейчас довольно много на любом CD с програм­мами. Ну и, конечно, радикальный выход из положения: воспользуйтесь для составления таблиц визуальным Web-редактором — он таких ошибок не сделает.

Проблемы с таблицами в старых версиях Navigator

А сейчас пора вплотную заняться Navigator.

Вы уже заметили, что старые версии этой программы отличаются весьма странным поведением. Мало того, что они зачастую некорректно отобра­жают даже абсолютно правильный с точки зрения стандартов HTML-код, так еще и содержат множество ошибок, с некоторыми из них вы уже позна­комились и научились их обходить. Сейчас мы продолжим разговор о не­скончаемой войне Navigator и Web-дизайнеров, первыми жертвами которой становятся таблицы.

( Примечание )

Новые версии Navigator (6.0 и 7.0) выводят все Web-страницы корректно. Так что к ним это не относится. Все, что сказано ниже, относится только к старым версиям Navigator, а именно популярным до сих пор многочисленным вер­сиям 4.7*.

Итак, какие сюрпризы продолжают преподносить нам старые версии Navi­gator?

Сюрприз первый. Когда мы говорили, что некоторые Web-обозреватели не­корректно отображают ячейки таблиц, не содержащие данных, мы имели в виду и Navigator, и Internet Explorer. Но если Internet Explorer просто ото­бражает такую ячейку без рамки, то Navigator может изуродовать таблицу так, что сам удивится. В качестве решения этой проблемы мы рекомендова­ли поместить в ячейку, которая должна оставаться пустой, символ нераз­рывного пробела &nbsp;. Сам Dreamweaver делает так, когда помещает на Web-страницу пустую таблицу. Однако в случае с Navigator это не помо­жет — ячейка все равно будет отображена некорректно. Радикальный спо­соб вразумить строптивую программу — "однопиксельный GIF", с которым вы уже знакомы.

Сюрприз второй. И более серьезный.

Когда вы задаете абсолютное значение ширины для ячейки, Internet Ex­plorer и Navigator ведут себя по-разному. Internet Explorer принимает задан­ную Web-дизайнером ширину как руководство к действию и пытается ее соблюдать. Само собой, если содержимое такой ячейки никак не будет в нее помещаться (например, если вы включили параметр No Wrap, в резуль­тате чего Web-обозреватель не сможет разбить длинную строку текста на более короткие), Internet Explorer все-таки изменит ее ширину. Но это крайний случай — в остальных случаях Internet Explorer весьма послушен.

Navigator в таком случае ведет себя гораздо строптивее. Установленную Web-дизайнером ширину ячеек он принимает как рекомендации, следовать которым абсолютно не обязательно. Реальная ширина ячейки вычисляется им самим, исходя из размеров таблицы и ее остальных ячеек, и практически всегда не равна тому, что вы задали. Заложенный разработчиками беспо­койный дух творчества не дает ему покоя.

Но что делать, если вы хотите, чтобы ячейки таблицы во что бы то ни стало имели нужную ширину? Есть решение, правда, довольно экстравагантное. Используется все тот же "однопиксельный GIF", из которого создается своеобразная "распорка", мешающая ячейке "сплющиться". При этом атрибут width тега <td> (как вы помните, он задает ширину ячейки) не используется вообще, а ширина ячейки задается аналогичным атрибутом тега <img>.

Это лучше изучить на примере. Давайте рассмотрим небольшой фрагмент кода таблицы:

<TABLE>

<TR>

<TD WIDTH="50">Ячейка 1</TD>

<TD WIDTH="100">Ячейка 2</TD>

<TD WIDTH="200">Ячейка 3</TD>

</TR>

</TABLE>

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

Посмотрите на этот код:

<TABLE>

<TR>

<TD>

<IMG SRC="lxl. gif" HEIGHT="1" WIDTH="50">

<BR>

Ячейка 1 </TD>

<TD>

<IMG SRC="lxl. gif" HEIGHT="1" WIDTH="100">

<BR>

Ячейка 2 </TD>

<TD>

<IMG SRC="lxl. gif" HEIGHT="1" WIDTH="200">

<BR>

Ячейка 3 </TD>

</TR>

</TABLE>

Все очень просто! Мы поместили в каждую ячейку "однопиксельный GIF" и задали его ширину с помощью атрибута width тега <img>. Разумеется, ячейка таблицы растянется так, чтобы его вместить. Высоту "однопиксельного GIF" (атрибут height тега <img>) мы задали в один пиксел, чтобы он не влиял на содержимое ячеек. В свою очередь, чтобы содержимое ячейки не повлияло на ширину "однопиксельного GIF", мы отделили их друг от друга тегом раз­рыва строки <BR>.

Можете проверить — все это работает!

Вообще, Navigator 4.7* славится своими странностями. Большинство из них, конечно же, давно выявлено и документировано. Если вы хотите узнать о них и научиться их обходить, посетите соответствующие Web-сайты или пообщайтесь с опытными Web-дизайнерами.

Конечно, Internet Explorer также имеет свои странности и ошибки. Но их значительно меньше, чем у Navigator, и затрагивают они, в основном, сис­тему безопасности. Не зря же компания Microsoft при разработке Internet Explorer 6.0 во главу угла поставила именно защиту данных. И недаром Internet Explorer, согласно данным статистики, используют 95% пользовате­лей Интернета.

Что дальше?

Осталось сделать последнюю страницу — список завершенных проектов. Ну, это уже совсем просто! Рис. 5.45 является тому примером. Не надо муд­рить с оформлением, просто сделайте элементарнейшую страничку с про­стейшей табличкой. Но не забудьте соблюсти единство оформления и со­хранить готовую страницу в файле 5.6.Мт.

Итак, почти все страницы нашего сайта готовы (осталось только сделать страницу ссылок, но это потом). Теперь самое время узнать, как соединить все эти страницы в Web-сайт и как поместить его во Всемирную сеть. И чем нам в этом может помочь Dreamweaver.

A Dreamweaver — просто мастер на все руки. Мало того, что он предостав­ляет нам мощные инструменты объединения Web-страниц в Web-сайт, так еще и помогает опубликовать его. А какие дополнительные инструменты дает он при этом!.. Но автор не будет сейчас раскрывать вам все его секре­ты — читайте следующую главу.