1  2  3  4  5  6  7  8  9  10

Текст в рамке
Пожалуй, текст в рамке — самое простое, что можно сделать с использованием таблиц. С помощью таблицы Web -дизайнеры с легкостью обходят ограничения HTML в форматировании текстовых абзацев. (Во всяком случае, рамку вокруг абзаца штатными средствами HTML вы не сделаете.)
Итак, для страницы со списком увлечений мы хотим создать красивый заголовок с рамкой вокруг него, не используя при этом графику. Прежде всего, создадим новую Web -страницу — она и станет списком увлечений нашего гипотетического Ивана Ивановича. Сохраним ее в файле
5.5.htm . И перечислим параметры заголовка:
Собственно, текст, который мы поместим в рамку (пусть это будет просто заголовок "Список увлечений");
Расстояние между рамкой и помещенным в ней текстом (4 пиксела);
Толщина рамки (8 пикселов);
Цвет рамки (темно-синий);
Размеры рамки (ширина — 100%, высота — 50 пикселов).
Итак, казалось бы, все предельно просто. Ведь что такое, в самом деле, текст, обведенный рамкой? Фактически это таблица, состоящая из одной ячейки, где и содержится нужный нам текст. Толщина ее границы равна толщине нашей рамки, то же самое с цветом. А расстояние между рамкой и содержимым единственной ячейки и даст нам промежуток между рамкой и текстом.
Просто, не спорим. Но это как раз та простота, которая хуже воровства. Если бы все Web -обозреватели обрабатывали атрибуты тегов < table >, < tr > и < td > одинаково, мы бы на этом и остановились. Но давайте всетаки доделаем наш текст в рамке и.посмотрим, что получится.
Начнем с самой рамки, т. е. с таблицы. Поместите в нашу пустую Web -страницу таблицу шириной 100% и высотой 50 пикселов с темно-синей рамкой толщиной 8 пикселов. Параметр Cell Padding должен быть равен 8 пикселам, a Cell Spacing — нулю. Эта таблица должна содержать одну строку и один столбец. Теперь нам осталось вписать в получившуюся рамку нужный текст. Поставьте текстовый курсор в единственную ячейку таблицы и наберите требуемый текст. Отформатируйте его как заголовок первого уровня и выровняйте по центру. Возможно, таблица немного растянется по вертикали, что­бы вместить весь текст. Можете включить флажок No Wrap , чтобы запретить перенос текста ячейки на другую строку.
Вот и все, вроде бы. Сохраните получившуюся страницу и откройте ее в Internet Explorer . Кажется, все нормально: Internet Explorer показывает ее так же, как и Dreamweaver . Наша работа закончена?
Нет. Уже говорилось, что разные программы Web -обозревателей обрабаты­вают один и тот же код HTML по-разному. И если вы откроете нашу новую страницу в старой версии Navigator ... Да что говорить — смотрите сами. Рамка состоит из двух половин: одна светлая, "освещенная", другая темная, "укрывшаяся в тени". Разве мы это хотели получить?! Нет, конечно, мы ничего не имеем против таких рамок — они даже посвоему оригинальны, но мы-то хотели получить однотонную рамку!
Что делать? Как заставить Navigator 4.74 отображать рамку нормально? Какой параметр таблицы или ячейки выставить?
К сожалению, ничто нам не поможет — таков уж этот Web -обозреватель... Нужно искать другой путь.
Давайте получше присмотримся к нашей рамке. В самом деле, что это такое? Текст заключен в белый прямоугольник, который находится внутри другого прямоугольника, но уже темно-синего цвета. Естественно, темносиний прямоугольник больше белого...
Так ведь это две вложенные таблицы!
В самом деле, это так. Попробуем исправить ситуацию. Внешняя таблица имеет невидимую границу (ее толщина равна нулю), темно-синий цвет фона и параметр Cell Padding , равный толщине рамки, которую нам необходимо получить. Внешняя таблица имеет белый фон (это обязательно, т. к. содержимое вложенной таблицы "унаследует" фон от внешней), опять же невидимую границу и параметр Cell Padding , равный нужному нам промежутку между рамкой и текстом. Таким образом, мы обходим проблему с отображением границ таблицы в некоторых программах Web -обозревателях.
Давайте выполним вышесказанное. Но прежде сотрем все содержимое страницы 5.5.htm . Для этого быстрее всего щелкнуть тег < body > в секции тегов и нажать клавишу < Del >.
Создадим новую таблицу шириной 100% и высотой 50 пикселов, с темно-синим фоном и толщиной рамки, равной нулю. Параметр Cell Padding должен быть равен 8 пикселам, a Cell Spacing — нулю. Эта таблица должна содержать одну строку и один столбец.
Теперь помещаем текстовый курсор в единственную ячейку этой таблицы и вставляем в нее вторую, внутреннюю, таблицу. Ее ширина и высота должны
быть равны 100% (чтобы заполнить всю ячейку), параметр Cell Padding —4 пикселам, толщина границы и Cell Spacing — нулю. Обязательно зададим белый цвет фона. Эта таблица содержит опять-таки одну ячейку. Готовая комбинация из двух таблиц — внешней и внутренней . Теперь введем и отформатируем текст заголовка — и опять получим то, что хотели. Но на этот раз наше творение будет нормально пока­зываться даже в самых капризных Web -обозревателях. Можете проверить!
Это лишь один из фокусов, к которым прибегают опытные Web -дизайнеры. К сожалению, Web -дизайн — пока что еще не столько технология и даже не столько искусство, сколько шаманизм. А действия Web -дизайнера иной раз здорово смахивают на шаманские камлания... разве что без бубна.
Текст в графической рамке
Аппетит приходит во время еды. Нам уже кажется, что текст в обычной цветной рамке — слишком простенькое украшение для нашей странички. Мы хотим чего-нибудь покрасивее, посложнее, позабавнее.
Давайте сделаем все тот же текст в рамке. Но не в простой рамке, а в rpa фической, т.е. для заполнения этой рамки мы используем не сплошной! цвет, а графическое изображение. Это и красиво, и оригинально. Единственное: вам придется сделать рамку потолще, чтобы пользователи смогли разглядеть ваш графический фон.
Перед тем как начинать работу, необходимо приготовить заранее файл фонового изображения. Если же говорить о параметрах текста в графической рамке, то:
Текст, который мы поместим в рамку, не изменился- "Список увлечений";
Расстояние между рамкой и помещенным в нее текстом — 4 пиксела;
Толщина рамки — 40 пикселов;
Цвет рамки совпадает с общим тоном фонового изображения (в нашем случае светло-серый);
Фоновое изображение — файл Wb 02049_.gif , поставляемый в комплекте Microsoft Office 2000;
Размеры рамки: ширина — 100%, высота не определена и устанавливается автоматически.
Графическая рамка для текста создается точно так же, как и цветная. За тем исключением, что для внешней таблицы мы зададим графический фон.
Сначала удалим содержимое страницы 5.5.htm . Если мы решили создать графическую рамку на странице со списком увлечений, пусть она станет окончательным вариантом ее заголовка.
Создадим внешнюю таблицу с шириной 100%, светло-серым фоном и толщиной рамки, равной нулю. Значение параметра Cell Padding устанавливаем 40 пикселов, а параметр Cell Spacing — ноль. Эта таблица должна содержать одну строку и один столбец. В качестве фонового изображения задаем подобранный файл. Теперь помещаем текстовый курсор в единственную ячейку этой таблицы и вставляем в нее вторую таблицу, также состоящую из одной строки и одного столбца. Ее ширина и высота должны быть равны 100% (чтобы заполнили всю ячейку), толщина границы и параметр Cell Spacing — 0, параметр Cell Padding — 4 пиксела. Не забудьте задать для нее белый фон.
Вот так мы создали красивый заголовок для нашей Web -страницы. Сохраните страницу и задайте ее параметры (цвет фона, текста и т. п.), как и у ранее созданных нами двух страниц. Ведь мы должны соблюдать единство стиля, помните?
К сожалению, здесь мы столкнемся с еще одной причудой старых версий Navigator . Давайте откроем в нем нашу Web -страницу и посмотрим, как он ее отобразит.
Остается только вписать в ячейку внутренней таблицы нужный текст, отформатировать его и насладиться результатом .
Из-за ошибки в программе неправильно отображается фон внутренней таблицы. Это происходит оттого, что Navigator некорректно обрабатывает уста­новки фона вложенных таблиц. Если для вложенной таблицы задан только цвет фона, а не фоновое изображение, в то время как для внешней таблицы. фоновое изображение задано, установки внутренней таблицы игнорируются.
Решение данной проблемы таково: найдите для внутренней таблицы соот­ветствующее фоновое изображение. После этого Navigator отобразит внут­реннюю таблицу правильно. Вы также можете найти или создать универ­сальный инструмент решения почти всех проблем Web -дизайнера — прозрачное графическое изображение размером 1x1 пиксел, сохраненное в формате GIF , так называемый "однопиксельный GIF ". Если вы зададите его в качестве фона внутренней таблицы, все будет отображаться в Navigator без искажений.
Но если у вас нет прозрачного GIF -изображения такого размера, не унывайте. Для того чтобы Navigator нормально отобразил внутреннюю таблицу, в режиме HTML -кода допишите в тег
< table > атрибут background с пустой строкой в качестве значения:
<TABLE BACKGROUND ="">
. . .
</TABLE>
Странный, даже глупый прием, но он на самом деле действует.

1  2  3  4  5  6  7  8  9  10

Вверх