www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Фон для сайта

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

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

Как известно, задать фон (background) для сайта можно в атрибутах тега <body>, например, используя стили CSS. Рассмотрим основные доступные установки для фона сайта:

background-color - цвет фона. Выбирается из обычной палитры цветов;
background-image - картинка для фона. Указывается адрес файла изображения;
background-repeat - повторение выбранной картинки. По умолчанию она повторяется по вертикали и горизонтали, заполняя весь экран. Можно выбрать повтор только по горизонтали (repeat-х), по вертикали (repeat-y) или без повтора (no-repeat);
background-attachment - привязка. По умолчанию задано scroll - фон перемещается при прокрутке вместе со стриничкой. Можно зафиксировать его, задав fixed. Это весьма эффектный прием, особенно, если фоном для сайта служит красивый рисунок или фотография. Применение прозрачности для страницы может дополнительно усилить художественный эффект. Следует, однако, помнить, что сложный фиксированный фон замедляет прокрутку страниц на слабых компьютерах;
background-position - расположение фонового рисунка: в центре, слева, справа, снизу или сверху.

Если вы решили сделать рамку-фон для сайта, то начать следует с определения её размеров. При верстке с помощью таблиц нужно задать ширину основной таблицы меньше 100%, например, <table width="90%">. В этом случае, ваша рамка будет равна 0,1 видимой области на любом экране. Можно задать и фиксированную ширину страницы, например, 1000 пикселей, но при этом ширина рамки будет зависеть от разрешения экрана монитора.

Фон для сайта Далее необходимо выбрать рисунок для фона сайта (заливку фона однородным цветом, понятно, не рассматриваем, так как простые решения нам чужды и мы создаем высокохудожественный проект). В интернете можно найти тысячи рисунков, текстур и орнаментов для фона. В основном, они бесплатные, потому что... никуда не годятся. Много неплохих вариантов в шаблонах Photoshop и в других аналогичных программах, особенно, если к ним применить фильтры. И конечно же, необходимо порыться в своих фотоколлекциях, то есть в "Яндекс.Картинках" и т.п. Так же рекомендую заглянуть на сайт lenagold.ru, на котором представлена неплохая коллекция фонов и клипартов.

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

Рис.1. Фон для сайта по деревообработке

В данном случае, исходное изображение бревен отражено по горизонтали и полученные две картинки объединены в одну для получения повторяющейся структуры фона (см. сайт "Продажа и установка домов из бревна и бруса").

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

Рис.2. Использование логотипа фирмы для фона сайта

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

Цветочный салон "Мощная роза"

Цветочный салон «Мощная роза» - одна из ведущих компаний, работающая в цветочной индустрии более 100 лет.

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

С нами всегда радостно и весело!

Рис.3. Фон для страницы сайта цветочного магазина

Для данного фона в HTML-коде для таблицы задано повторение по вертикали (repeat-y) фона в виде структуры блокнота со спиральной прошивкой, а для столбца с текстом - фон с рисунком розы без повторения (no-repeat), который получается наложенным сверху. Соответственно, текст и рисунки пойдут по созданному комбинированному фону.

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

И напоследок, создавая красивый фон для сайта, не забывайте, что сложный рисунок увеличивает время загрузки сайта, а быстрый интернет далеко не у всех... К сожалению!

28.02.2010 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Создание иконки для сайта
Вывод текущей даты на сайте
Создание формы обратной связи на сайте
Создание "схемы проезда" на сайте
Веб-дизайн, поисковая оптимизация и продвижение сайтов в интернете
Сжатие фотографий для интернета и электронной почты
Ключевые слова и продвижение сайта