Учебник Macromedia Dreamweaver (стр. 35 из 135)

Сделали? Теперь повторите то же самое справа от текста, после чего сверьтесь с рис. 5.38, все ли правильно вы сделали.

Рис. 5.38. Текстовый абзац с вертикальными линейками

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

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

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

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

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

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

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

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

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

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

Примечание

Вообще-то такую таблицу можно сделать стандартными средствами HTML, воспользовавшись уже знакомым вам слиянием ячеек. Но в этом случае вам не удастся сделать такую рамку, какую вы видите на рис. 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.

Рис. 5.40. Внешняя таблица, которая потом станет списком увлечений

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

Рис. 5.41. Заголовок первой секции списка увлечений

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

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