Macromedia Dreamweaver MX

Недостатки табличного дизайна

Осталось разбавить дегтем оставшийся мед.

Здесь мы поговорим о недостатках табличного дизайна. В основном, они происходят от недостатков самих таблиц; а недостатки таблиц мы перечис­лили в главе 5. И все-таки перечислим их еще раз. Но, кроме них, есть и недостатки самого способа построения Web-страниц с использованием таб­лиц, и мы их также рассмотрим.

Начнем с таблиц как основы табличного дизайна.

Недостатки таблиц

Как уже говорилось, недостатки таблиц были описаны в главе 5. Если вы их забыли, давайте вспомним: очень медленная загрузка и отображение и гро­моздкий, запутанный HTML-код. Рассмотрим их еще раз и уже в приложе­нии к табличному дизайну. (О специфических недостатках, связанных с осо­бенностями обработки НТМЬ-кода отдельными программами ¥еЬ-обозре - вателей, мы говорить не будем. Вы можете прочитать о них все в той же главе 5.)

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

Какие же пути решения этой проблемы существуют?

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

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

Насчет относительных значений ширины и высоты. Таблица разметки, как правило, занимает всю ширину ¥еЬ-страницы, а значит, без относительно­го значения этой самой ширины не обойтись. Конечно, иногда таблицы разметки имеют фиксированную ширину, но в этом случае используется не вся полезная площадь окна ¥еЬ-обозревателя, и могут возникнуть пробле­мы, если ширина окна меньше ширины таблицы. То же самое можно ска­зать об относительных значениях ширины и высоты ячеек таблиц: одна из них, как правило, с основным содержимым страницы, должна использовать оставшееся от ее "соседей" свободное пространство по максимуму. А значит, без относительных значений размеров опять же не обойтись.

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

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

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

Таблица 1: заголовок сайта

Таблица 2: основное содержание сайта

Таблица 2: набор гиперссылок (полоса навигации)

Таблица 3: сведения об авторских правах

Рис. 8.33. Многотабличный дизайн начальной страницы И так часто делают! Берите пример!

Во-вторых, некоторые части страницы вы можете вынести вообще за пре­делы таблицы разметки. Чаще всего так поступают со сведениями об ав­торских правах, реже — с заголовком. Пример такого подхода показан на рис. 8.34.

Рис. 8.34. Дизайн главной страницы с заголовком и сведениями об авторских правах, вынесенными за пределы таблицы разметки

Давайте поступим так с нашим сайтом: вынесем за пределы таблицы заго­ловок сайта и сведения об авторских правах. Конечно, поскольку страницы нашего сайта очень малы, это не даст большого прироста скорости загруз­ки, но все-таки сделаем это.

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

Сначала нам необходимо вставить перед таблицей разметки пустой абзац. Поместите курсор мыши левее таблицы так, чтобы он принял вид текстово­го курсора, и щелкните левой кнопкой мыши. Слева от таблицы появится большой мигающий текстовый курсор. Нажмите клавишу <Enter>, и Dream­weaver поместит перед таблицей пустой абзац.

Теперь выделите текст заголовка и перетащите его в этот пустой абзац. От­форматируйте его, чтобы он походил на заголовок сайта. После этого уда­лите верхнюю строку таблицы, где раньше был заголовок, и следующую за ней узкую строку — горизонтальный просвет.

Далее поместите курсор мыши правее таблицы так, чтобы он принял вид текстового курсора, и щелкните левой кнопкой мыши. Большой мигающий текстовый курсор появится теперь справа от таблицы. Нажмите клавишу <Enter>, и Dreamweaver поместит после таблицы пустой абзац. Переместите туда текст сведений об авторских правах. Останется только уменьшить вы­соту ячейки колонки новостей, сделав ее равной высоте ячейки основного содержимого, и удалить ненужную строку внизу таблицы. Возможно также, что вам придется заново выставить значения ширины ячеек.

Сохраните теперь получившуюся страницу. У вас должно получиться нечто, похожее на рис. 8.35.

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

И все же создавать "с нуля" таблицу разметки лучше всего в режиме разметки...

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

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

Недостатки табличного дизайна

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

Недостатков, пожалуй, всего два. Но каких!!!

Первый недостаток: большое количество повторяющихся элементов, при­сутствующих на всех страницах сайта. Посмотрите сами — на каждой стра­нице нашего нового сайта Sample site 3 есть совершенно одинаковые заго­ловок, полоса навигации и сведения об авторских правах. Именно из-за этого файлы Web-страниц, созданных на основе табличного дизайна, так велики. И когда посетитель щелкает по гиперссылке, все это хозяйство каждый раз загружается заново.

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

Конечно, мы можем уменьшить объем HTML-кода уменьшением объема содержимого страницы, "выносом" некоторых его фрагментов за пределы таблицы (это все мы рассмотрели выше), тщательной оптимизацией, нако­нец. Но радикального уменьшения объема кода это не даст; страница так и останется достаточно большой. А все из-за этих повторяющихся элементов, от которых никуда не деться.

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

Первый недостаток табличного дизайна непреодолим. Можно только по­советовать не создавать слишком больших и сложных повторяющихся эле­ментов и тщательно оптимизировать HTML-код. И — смириться с неиз­бежным...

А вот второй недостаток вполне преодолим. И преодолеть его нам поможет все тот же великолепный Dreamweaver. Для этого он предоставляет замеча­тельное средство, называемое шаблонами и описываемое в главе 9.

Что дальше?

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

Собственно, вы уже поняли, какая тема будет следующей. Это шаблоны. И вы уже знаете, для решения каких проблем они созданы. Так не будем же терять времени! За дело!