5. Таблицы

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

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

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

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

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

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

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

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

	1	2	3	4	4
	5	6	7	8	9
	10	11	12	12	12
	13	14	15	Пусто	Пусто
	13	14	Пусто	Пусто	Пусто
	13	15	Пусто	Пусто	Пусто

Рис. 5.44. Схема формирования составного изображения

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

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

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

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

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

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

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

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

Примечание

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

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

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

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

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

<TD><IMG SRC="lxl.gif"></TD>, НО ОБ ЭТОМ МЫ ПОГОВОРИМ НИЖЕ.

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

<TABLE> <TR>

<TD WIDТН="50">Ячейка 1</TD>

<TD WIDТН="100">Ячейка 2</TD>

<TD WIDТН="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.htm.

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

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