Лабораторная работа 9.8

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009

ВЕРСТКА С ПОМОЩЬЮ СЛОЕВ.

Слой с одним “отрезанным” уголком.

Слой с двумя “отрезанными” уголками

Лабораторная работа 9.8.

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

1. Вначале создаем желаемый уголок в графическом редакторе. На рис. 1 представлено изображение, которое в дальнейшем будет использовано для создания уголка у слоя (файл 105_1.gif).

Рис. 1. Изображение уголка

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

Рис. 2. Цвета, используемые в изображении уголка

Теперь добавляем наш уголок к слою в качестве фонового рисунка и устанавливаем нужный цвет фона. Все это можно проделать через универсальный стилевой атрибут background. Кроме того, следует отключить повторение фона через значение no-repeat (файл sloi_30.html).

Результат данного примера показан ниже (рис. 3).

Рис. 3.Вид слоя с уголком

Чтобы не получилось так, что первая строчка выходит за пределы цветной области в районе уголка, требуется сдвинуть эту строку вправо. Это делается с помощью свойства text-indent, его значение устанавливает отступ первой строки. Расстояние подбирается экспериментально в зависимости от размеров рисунка уголка и текста.

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

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

Рис. 4. Изображение для создания уголка

Поскольку ширина слоя может зависеть от ширины окна браузера и разрешения монитора, т.е. заранее не известна, то рекомендуется намеренно увеличить ширину рисунка, например, до 1200 пикселов и более. Бояться, что появится горизонтальная полоса прокрутки не нужно, поскольку изображение используется как фон, и все лишнее будет «обрезано». Аналогично обстоит дело и с высотой, но здесь можно ограничиться значением около 500 пикселов.

Код останется прежним, за исключением того, что уберется цвет фона (файл sloi_30.html).

При этом способе формирования уголка следует принимать во внимание, что графический файл с фоновым рисунком может оказаться достаточно большим по объему и пользователю придется долго ожидать его загрузки.

2. Хотя любой слой по своему определению является прямоугольником, с помощью изображений у слоя можно сделать один, два или даже четыре декоративных уголка. Далее рассмотрим вариант создания у слоя двух верхних «отрезанных» уголков.

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

Рис. 5. Подготовленные уголки

В изображении не должна быть включена прозрачность, используется два цвета? фона и слоя, как показано на рис. 6.

Рис. 6. Цвета, используемые в изображении уголка

Нам понадобится два слоя, один из которых вкладывается внутрь другого. Первый, назовем его left_corner, отвечает за левый уголок, а второй - right_corne - за правый. Добавление рисунка уголка происходит с помощью универсального стилевого параметра background, в качестве значения которого устанавливается цвет фона, путь к графическому файлу и положение рисунка (файл sloi_30.html). Поскольку изображение уголка задается в виде фона, который по умолчанию повторяется по вертикали и горизонтали, то к атрибуту background следует также добавить аргумент no-repeat. Это гарантирует, что рисунок будет отображаться только один раз, без всяких повторений.

Чтобы текст внутри цветной области не «налипал» на края, следует добавить поля к внутреннему слою через параметр padding. Вдобавок воспользуемся атрибутом text-indent, его значение устанавливает отступ первой строки - тогда первая строчка текста не будет выходить за пределы области в районе уголка. Значение text-indent подбирается экспериментально в зависимости от размеров рисунка уголка и текста. К сожалению, применить подобный прием к правому верхнему уголку не удастся, так что верхняя строка текста с правого края может выходить за пределы цветовой границы. В этом случае рекомендуется увеличить значение поля справа через свойство padding-right или уменьшить размер изображения уголка.

Результат данного примера продемонстрирован ниже (рис. 7).

Рис. 7. Вид блока с двумя уголками

Не обязательно использовать элементы <DIV>, в качестве внутреннего слоя подойдет и другой блочный элемент, например <H1>. Также, чтобы обеспечить поля вокруг текста, добавим внутрь слоя left_corner параграф (тег <P>) и для него установим стилевой атрибут padding, как показано в следующем примере (файл sloi_31.html).

При использовании параграфов (< P >) и заголовков (< H1 >) следует принимать во внимание, что отступы вокруг этих элементов заложены по умолчанию, поэтому их следует обнулять при помощи свойства margin, либо устанавливать свои собственные значения.