Macromedia Dreamweaver MX

Сложные таблицы

Уже было сказано, что работа ¥еЬ-дизайнера — по большей части не наука (здесь вернее сказать — технология), а искусство (а зачастую — просто ша­манизм). И, как в любом искусстве, здесь нет готовых путей решения той или иной проблемы. Есть только общие рекомендации и толстенные руко­водства по НТМЬ и ¥еЬ-обозревателям, не всегда и не во всем помо­гающие.

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

Выход из этого положения? Вряд ли он существует... Конечно, программы ¥еЬ-обозревателей постепенно приближаются к стандартам НТМЬ, количе­ство ошибок и несовместимостей в них уменьшается, а программы Yeb - редакторов становятся все "умнее" и проще в использовании. Но это не за­менит обычной человеческой изобретательности. И ¥еЬ-дизайн еще долго будет искусством (а зачастую — просто шаманизмом) и вряд ли когда- нибудь, даже в отдаленном будущем, полностью превратится в технологию.

Конечно, со временем к вам придет опыт, появятся свои наработки, свой стиль. Это вам сильно поможет в работе. Также очень помогает общение с другими, даже не обязательно более опытными ¥еЬ-дизайнерами. Ведь давно ясно, что все сложности лучше решать сообща.

Посмотрите, например, на рис. 5.39. Это список увлечений нашего гипоте­тического героя. Давайте воплотим его в НТМЬ.

Вы сразу скажете, что НТМЬ не позволяет делать такие сложные таблицы. Да, напрямую не позволяет. Но сделать ее все-таки можно, и для этого нам придется воспользоваться все теми же вложенными таблицами.

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

Вообще-то такую таблицу можно сделать стандартными средствами НТМІ., воспользовавшись уже знакомым вам слиянием ячеек. Но в этом случае вам не удастся сделать такую рамку, какую вы видите на рис. 5.39.

Посмотрите хорошенько на рис. 5.39. Что вы видите? В первую очередь, большую таблицу из четырех ячеек. В этих ячейках располагаются четыре вложенные таблицы, отформатированных различным образом. Две из них представляют собой секции таблицы: "Компьютеры" и "Прочие", а две дру­гие — заголовки названных секций. Это логическая структура таблицы, и ее тоже нужно хорошо себе представлять. Но нас в данный момент больше интересует физическая структура, описывающая, как отформатированы все эти вложенные таблицы.

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

□ одна строка, один столбец, черный фон;

□ три строки, три столбца, белый фон, невидимая граница;

□ одна строка, один столбец, черный фон;

□ две строки, три столбца, белый фон, невидимая граница.

Заметьте, что здесь перечислены только главные параметры. Остальное бу­дет определено позднее, в самом конце. Сейчас же нам нужно выяснить для себя то, без чего настоящая таблица у нас не получится.

Итак, параметры форматирования вложенных таблиц мы выяснили. Оста­лось определить параметры внешней таблицы. А они таковы (напишите их на том же листе бумаги):

□ четыре строки и один столбец;

□ толщина границы должна быть равна нулю;

□ параметр Cell Padding равен двум пикселам. Если мы хотим сделать видимую границу, то должны прибегнуть к приему, описанному ранее;

□ цвет фона — черный.

Опять же, мы не стали выяснять малозначительные параметры. Выясним их позднее.

Казалось бы, все ясно. Пора приступать к работе над таблицей. Но не стоит торопиться. Давайте еще раз хорошенько посмотрим на нашу таблицу и перечитаем ее (и вложенных таблиц) параметры. Подумаем, что можно улучшить.

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

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

Такой процесс тонкой отладки и подгонки HTML-кода называется оптими­зацией. Оптимизация ставит своей целью уменьшение размера кода (опти­мизация по размеру), уменьшение времени вывода страницы Web-обо­зревателем (оптимизация по скорости) либо то и другое одновременно. (Оп­тимизация применяется не только в Web-дизайне, но и в обычном программировании, однако разговор сейчас не об этом.) Если вы всерьез собираетесь заниматься Web-дизайном, старайтесь всегда найти минутку, чтобы "поколдовать" над HTML-кодом. Как правило, после оптимизации код действительно становится компактнее и быстрее.

И еще. Оптимизация — процесс творческий. Его невозможно автоматизи­ровать, как нельзя переложить на плечи машин, скажем, стихосложение или зодчество. Конечно, "умный" Dreamweaver создает достаточно компактный код, но вмешательства человека не заменит никакая, даже самая совершен­ная программа. Если только, конечно, всех Web-дизайнеров не переведут в виртуальную реальность...

А вот теперь можно браться за мышь. Откроем страничку 5-5.htm, если она закрыта, и поставим текстовый курсор после текста вступления. Если вы хотите сделать промежуток между таблицей и текстом вступления больше, создайте еще один пустой абзац, нажав клавишу <Enter>. Разверните окно документа Dreamweaver на весь экран — у нас получится довольно большая таблица.

Прежде всего, разумеется, создадим внешнюю таблицу. Она будет состоять из четырех строк и одного столбца. Задайте ей черный цвет фона, невиди­мую границу (если вы не помните, граница становится невидимой в том случае, когда ее толщина равна нулю), параметр Cell Padding, равный двум пикселам, и Cell Spacing, равный нулю. Ширина таблицы пусть останется 100%. После всего этого у вас должно получиться что-то, похожее на рис. 5.40.

Теперь давайте создадим заголовок первой секции (первую вложенную таб­лицу). Поместите текстовый курсор в первую ячейку. Вставьте в нее табли­цу, имеющую следующие параметры: одна строка и один столбец, невиди­мая граница. Ширина и высота таблицы пусть будут равны 100% — вло­женная таблица должна заполнить ячейку целиком. Параметр Cell Padding оставьте равным двум пикселам, чтобы текст ячейки не прижимался вплот­ную к границе, а параметр Cell Spacing пусть будет равен нулю. Цвет фона не задавайте. Поместите в единственную ячейку этой таблицы текст и от­форматируйте его, как вам нравится, но при этом обязательно задайте для него белый цвет, иначе пользователь ничего не увидит. Результат показан на рис. 5.41.

Теперь очередь за первой секцией (вторая вложенная таблица). Поставьте текстовый курсор во вторую ячейку и поместите туда таблицу. Ее парамет­ры: три строки и три столбца, опять же невидимая граница, белый фон. Ширину и высоту установите в 100%, параметр Cell Padding — 2 пиксела, а Cell Spacing — ноль. После этого заполните таблицу текстом, измените раз­меры ячеек так, чтобы таблица имела минимальный размер. Задайте для всех ячеек вертикальное выравнивание по верху — так ваша таблица будет больше похожа на печатный документ. Полученный результат можно видеть на рис. 5.42.

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

Поместите текстовый курсор в единственную ячейку первой вложенной таблицы и щелкните тег <table> в секции тегов. Первая вложенная таблица будет выделена. Нажмите комбинацию клавиш <Ctrl>+<C>, чтобы скопи­ровать ее в буфер обмена Windows (или сделайте это другим образом, благо Dreamweaver предоставляет целых три способа). Теперь поместите тексто­вый курсор в третью ячейку внешней таблицы и нажмите комбинацию кла­виш <Ctrl>+<V>, чтобы вставить сюда содержимое буфера обмена. В третью ячейку будет вставлена точная копия первой вложенной таблицы; вам нуж­но будет только изменить находящийся в ней текст. Точно так же поместите в четвертую ячейку копию второй вложенной таблицы, удалите лишнюю строку и впишите в ее ячейки нужный текст. Окончательный вид страницы со списком увлечений представлен на рис. 5.43.

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

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

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

Это тоже оптимизация. И на этот раз более серьезная.

Компьютеры

Dreamweaver

:Моя кошка - единственное живое существо, которое ;меня понимает :Я развожу дома тараканов

Породистых!

Рис. 5.43. Готовый список увлечений

Вместо того чтобы "тыкать" мышью в окно документа, мы отредактируем НТМЬ-код. Откройте окно кода или переключитесь в режим отображения кода. Найдите следующий фрагмент:

<^аЫе л^Ш="100се" Ьогс1ег="0" се11зрас1пд="0" се11рас! с!1пд="2" (ЬЬдсо1ог="#000000">

<!— Это определение внешней таблицы —>

<1;г>

<М>

<!— Это первая строка внешней таблицы и ее единственная ячейка —>

<^аЫе л^Ш="100се" border="0" се11зрас1пд="0"

^се 1 lpadding= "2" 11е 1д№= " 10 0 се" >

<!— Это внутренняя таблица —>

<1;г>

<td>

<! — Это единственная строка и ячейка внутренней таблицы —> аИдп="сегЛег">

<:£огЛ Со1ог="#ЕЕЕЕЕЕ">

<э tгопд>Компыотеры</э tгопд>

</font>

</div>

<;— это текст, содержащийся в единственной ячейке внутренней таблицы —> </^>

</1;г>

</taЫe>

<!— Здесь кончается определение внутренней таблицы —>

</td>

</tr>

<!— А здесь кончается определение первой строки внешней таблицы —>

Сейчас мы вырежем несколько строк этого кода. Вот что получилось:

Ctable width="100%" border="0" cellspacing="0" cellpadding="2" 4>bgcolor="#000000">

<tr>

<td>

<div align="center"xfont

4>color="#FFFFFF"xstrong>KoMnbiOTepbr</strongx/ fontx/div>

</td>

</tr>

Как видите, мы удалили все определение внутренней таблицы, оставив только ее содержимое. Теперь переключитесь в режим отображения страни­цы и посмотрите, что получилось. Замечательно, нам даже ничего не нужно подправлять! Аналогично измените HTML-код, связанный с третьей ячей­кой и третьей вложенной таблицей. Сделайте это самостоятельно — это бу­дет лучшей практикой.

Все, наша оптимизация закончена! А страница списка увлечений Ивана Ивановича полностью готова.