Как вставить баннер на сайт?

8 декабря 2014 г. Время чтения: 7 мин. Опубликовано в разделах: FAQ по созданию сайта, Блог, Как сделать?

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

Баннеры бывают разной направленности – для простой рекламы товара или компании, PR компании или проекта и, конечно, баннеры дающие ссылку на сайт. От того, к какой категории относится баннер, зависит концепция его оформления. Общие рекомендации по оформлению всех типов баннеров следующие:

Почему нужно уделить внимание размеру и скорости загрузки баннера?

По статистике, взгляд пользователя фиксируется на баннере всего на 1-2 секунды. Если за это время баннер не успеет загрузиться, человек не увидит ваше рекламное предложение и это будет заведомо упущенный потенциальный клиент. По этой же причине информация, содержащаяся на баннере должна быть лаконичной. Достигается это или путём графического отображения, ускоряющего скорость восприятия, или написанием короткого текста.

Вставляем баннер на сайт:

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

<a href="/ссылка на сайт" title="заголовок" target="_blank" rel="nofollow"><img src="/путь к изображению" alt="альтернативный текст" title="заголовок" /></a>

Для баннера с помощью атрибутов изображения width и height можно жестко (в пикселях) или пропорционально (в процентах) задать размеры по ширине и высоте, а с помощью style — стиль отображения баннера (границы, отступы).

Атрибут target="_blank" в html-теге нужен, чтобы ссылка на сайт открывалась в новом окне или новой вкладке браузера, а атрибут rel="nofollow" необходим для того, чтобы поисковые роботы при индексации страницы с размещенным баннером не учитывали ссылку на сайт при расчете ссылочного веса страницы.

Если анимированный баннер выполнен в формате GIF, то его размещение на сайте осуществляется аналогично графическому баннеру. Анимированный же flash-баннер следует размещать на сайте несколько иначе: используется html-тег . Чтобы разместить баннер на сайте с помощью тега , нужно применить, к примеру, такой код:

<object type="application/x-shockwave-flash"
data="images/banner.swf" width="400" height="300">
<param name="quality" value="high">
<param name="wmode" value="opaque">
</object>

Данный код следует вставлять в html-код страницы в том месте, где планируется «повесить» баннер. Параметров и атрибутов в <object></object> может быть гораздо больше, например, можно задавать размеры горизонтального и вертикального отступов от окружающего баннер контента.

С помощью событий можно изменять «поведение» баннера:

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

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

Понравился пост?

Подпишитесь на ежедневное обновление нашего блога прямо сейчас! Будьте в курсе новостей интернет-маркетинга!

Интернет-магазин и развитие
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Интернет-магазин и развитие на 100%
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Корпоративный сайт и развитие
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Корпоративный сайт и развитие на 100%
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Сайт-визитка и развитие
Получать новости компании 


×
Сайт-визитка, тексты и развитие
Получать новости компании 


×
Сайт-визитка и развитие на 100%
Получать новости компании 


×
Сайт, тексты и развитие (36 262 р)
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж и Google.Adwords
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ и Adwords
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ 35 300 руб.
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Курс «Продвижение сайта без бюджета»
Получать новости компании 


×
Курс «Продвижение сайтов. Модуль 2»
Получать новости компании 


×
Курс «Профессиональная работа с контекстной рекламой»
Получать новости компании 


×
Курс «Создание Landing page + Яндекс.Директ»
Получать новости компании 


×
Курс «Создание сайта на Joomla 3! Модуль 2. Разработка»
Получать новости компании 


×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании 


×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании 


×
Курс «WordPress. Модуль 1. Управление сайтом»
Получать новости компании 


×
Курс«WordPress. Модуль 2. Разработка»
Получать новости компании 


×
Курс «Создание интернет-магазина»
Получать новости компании 


×
Курс «Создание сайта на основе CMS/HTML»
Получать новости компании 


×
Курс «Профессиональная веб-аналитика Google и Яндекс»
Получать новости компании 


×
Курс «Непоисковое продвижение сайтов в Интернет»
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Google Adowrds
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds 2 месяца
Получать новости компании 


×