Добавить в избранное  ||  Особенности дизайна HTML-страниц  ||  Начало  ||  Рамки в HTML

2. Фоновый рисунок и его применение

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

Фон веб-страницы.

Чтобы на веб-странице с левого края шла вертикальная фоновая полоса, используется следующий прием. Создаем рисунок шириной примерно 2000 пикселов. Такая большая ширина нужна для того, чтобы на всех мониторах независимо от их разрешения страница выглядела бы одинаково (рис. 2.1). С левой части рисунок зарисовывается нужным цветом желаемой ширины. Можно создавать не только прямоугольник, но и любые декоративные изображения, главное, чтобы они состыковывались по вертикали. Полученный рисунок вставляем на веб-страницу как обычный фон параметром background тега BODY. Поскольку рисунок широк и не помещается на всю ширину экрана монитора, на странице он будет повторяться только вниз.

Рис. 2.1. Фоновый рисунок для различных разрешений монитора

В итоге получим страницу, у которой по левому краю идет декоративная полоса (рис. 2.2).

Рис. 2.2. Результат использования широкого фона

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

Рис. 2.3. Использования таблицы для разделения материала

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

Рис. 2.4. Фоновый рисунок для ячейки таблицы

Код для данного использования таблицы с фоном приведен в Примере 2.1.

Пример 2.1. Создание фона с помощью таблицы

<table width="300" cellspacing="0" cellpadding="0"> <tr>
<td width="82" background="bg.gif"><img src="spacer.gif" width="82" height="1">Меню</td>
<td width="200" bgcolor="#CCCCCC">Текст</td> </tr> </table>

Рисунок bg.gif является фоном, а spacer.gif служит распоркой. В правой ячейке фон залит серым цветом, что можно делать по желанию.

Вертикальные линии

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

Рис. 2.5. Заготовка для создания линии

Следующий этап – создание таблицы. Ширина одной из ячеек должна совпадать с толщиной линии, обычно это 1-2 пиксела. Внутри нее и размещаем фоном изображение.

Пример 2.2. Создание вертикальной линии

< table width="300" border="0" cellspacing="0" cellpadding="0"> < tr>
< td width="2" background="line.gif" > < img src="spacer.gif" width="2" height="1"> < /td>
< td width="10" > < img src="spacer.gif" width="10" height="1"> < /td>
< td width="288" > < i> При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной.< /i> < /td> < /tr> < /table >

Если ширина таблицы фиксирована, лучше задавать точные размеры всех ячеек. При ширине заданной в процентах, возможны небольшие изменения размеров ячеек. Вот для такого случая и делается изображение линии (рис. 2.5) с пустым полем справа. Если этого не сделать, линия может получиться несколько толще, чем ожидалось. А так, если ширина ячейки и будет увеличиваться, несмотря на прописанные размеры, вид линии останется неизменным. Вдобавок, такой «запас» позволяет изменять значение параметра cellpadding, который управляет отступом от края таблицы до ее содержимого, без отрицательных последствий.
Рисунок достаточно делать шириной 20-30 пикселов, а цвет фона рисунка должен быть таким же, как у веб-страницы.

Добавить в избранное  ||  Особенности дизайна HTML-страниц  ||  Начало  ||  Рамки в HTML

top