Фоновые рисунки - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Верстка веб-страниц » Основы верстки » Фоновые рисунки
Фоновые рисунки
EvgenyДата: Воскресенье, 28.02.2010, 20:28 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
В связи с особенностями веб-страниц, фоновые рисунки приобретают значительную роль при верстке документов сайта. При этом они активно участвуют в самых разных делах, например, автоматизируют процесс присоединения рисунков к тексту, создают градиентные переходы и, конечно, добавляют фон под содержимым. Далее рассмотрены некоторые аспекты применения фоновых изображений.

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

Установка фонового рисунка на веб-страницу традиционно происходит через параметр background тега < BODY>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое слово url. Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.


[small]
Рис. 1. Фоновая картинка без повторения
[/small]

Чтобы установить картинку на веб-страницу, следует добавить параметр background к селектору BODY, как показано в примере 1.

[small]Пример 1. Фоновый рисунок[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
   background:   
    url("pic.gif") /* Путь к графическому файлу */
    no-repeat /* Отменяем повторение рисунка */
    30px /* Смещаем рисунок вправо */   
    20px; /* Сдвигаем рисунок вниз */
}
</style>
</head>
<body>
< p>...</p>
</body>
</html>

В данном примере графический рисунок pic.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.


Рис. 2. Повторение рисунка по вертикали


Рис. 3. Картинка для создания фона

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

[small]Пример 2. Повторение фона по вертикали[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
   background:   
    #fc0 /* Цвет фона веб-страницы */
    url("pic.gif") /* Путь к графическому файлу */
    repeat-y; /* Повторение по вертикали */
}
</style>
</head>
<body>
< p>...</p>
</body>
</html>

Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).


[small]Рис. 4. Использование градиента в качестве фона[/small]

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).


[small]Рис. 5. Градиентное изображение для создания фона[/small]

В примере 3 показан код HTML для создания градиентного фона.

[small]Пример 3. Повторение фона по горизонтали[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
   background:   
    url("pic.gif") /* Путь к графическому файлу */
    repeat-x; /* Повторяем фон по горизонтали */
text-align: center; /* Выравнивание блока по центру */
}

DIV {
   margin: auto; /* Отступы вокруг блока */
   width: 75%; /* Ширина блока */
   height: 90%; /* Высота блока */
   text-align: left; /* Выравнивание текста по левому краю */
   padding: 10px; /* Поля вокруг текста */
   background: white; /* Цвет фона */
}
</style>
</head>
<body>

<div>
    Lorem ipsum...
</div>

</body>
</html>

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.

Добавление рисунка к тексту

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

[small]Пример 4. Добавление рисунка[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
H2 {
   background:   
    url('sample.gif') /* Путь к изображению */
    no-repeat /* Не устанавливать повторение фона */
    1px /* Смещаем рисунок вправо */
    2px; /* Смещаем рисунок вниз */
   padding-left: 20px; /* Отступ слева от текста */
}
</style>
</head>
<body>

<h2>Заголовок</h2>
< p>Основной текст</p>

</body>
</html>

Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Это позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить параметр padding-left, за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка и желаемому отступу между изображением и текстом.

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


[small]
Рис. 6. Отображение картинки при изменении размеров текста
[/small]

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

Если добавляется высокая картинка, то при уменьшении текста она «обрезается» снизу, а затем, при увеличении размера, рисунок отображается полностью.

 
Форум » Верстка веб-страниц » Основы верстки » Фоновые рисунки
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]