Как сделать баннер для сайта.

imegesПри создании сайта нередко возникает вопрос, как можно сделать баннер для своего сайта. Что бы каждый мог его скачать как код и установить  на другом сайте.  В этой статье я расскажу, как можно сделать простой баннер для вашего сайта. Я здесь не буду касаться таких тем, как нарисовать простую картинку для баннера или как создать флешь баннер, так как это совершенно другая тема и требует больше информации и написания ряда статей. Поэтому об этом в дальнейшем, возможно, я и расскажу, как это всё делается, как рисуются картинки и как делается gif или swf анимация. Ну а здесь я просто скажу, что для создания, например, простой картинки или gif анимации можно воспользоваться программой Adobe Photoshop, на мой взгляд, это очень хороший вариант.

 

 

 

imeges

 

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

 

imeges

 

 

Но об этом как я уже и говорил высшее, нужно рассказывать отдельно. Поэтому вернёмся к основной теме как создать простой баннер для сайта
И так для начала вам нужно нарисовать картинку для вашего баннера, предположим вы это уже сделали и разместить ее на сервере в интернете где, это не принципиально, вы можете разместить ее там же где и сам сайт, а можно и совершенно в другом месте. Главное что бы к вашей картинке был свободный доступ через интернет. К примеру, можно просто создать дополнительную папку там же где и находится ваш сайт, а в нее просто загрузить картинку для баннера. После чего нужно написать ссылку на эту картинку, ( пример: http://postcard.16mb.com/images/joomla_logo_black.jpg ) то есть полный путь к вашей картинке. После чего для того что бы эта картинка выводилась на странице пишем вот такой код
 

<a href="http://postcard.16mb.com/" target="_blank" title="Пример сайта визитки."><img  src="http://postcard.16mb.com/images/joomla_logo_black.jpg" width="400" height="80" border="3"></a>


Пояснение к коду:

a href="Здесь вставляем ссылку куда должен ссылаться баннер”
target="Как должен выполнятся переход (_blank- переход выполнится в новой вкладке.) "
title="Текст подсказка при наведении."
img  src=http:// Полная ссылка на картинку банера
width="400" – Ширена баннера в пикселях.
height="80" – Высота баннера в пикселях.
border="3" – толщина обводки (Бордюра) вокруг картинки.
 
  Вот с помощью такого простого кода можно вывести как статический баннер,   так и анимированный (gif) на страницу сайта.
 
  Но для вставки флешь (swf) баннера понадобится код немного посложнее.
И здесь при работе с ( swf ) баннерами есть как свои преимущества так и недостатки. При выводе на странице обычного флешь файла в виде баннера не удаётся с помощью кода html сделать рабочую ссылку для перехода при клике по баннеру. Такой код просто не работает. Поэтому нужно делать сразу интерактивный файл swf  который будет сам при клике перебрасывать по заданному адресу. С одной стороны это преимущество. Так как если вы вдруг решили поменять ссылку этого баннера на другие страницы. То вам ненужно просить всех у кого стоит ваш баннер менять ссылки, вы можете просто создать другой файл для баннера с таким же названием и заменить его у себя, а он автоматически будет подгружаться на всех сайтах у кого стоит код вашего баннера. Но с другой стороны вам нужно уметь работать с флешь анимацией. Недостатки такого баннера это то, что он не будет работать в тех браузерах, которые не поддерживают флешь технологии, хотя на сегодняшний день флешь работает практически во всех браузерах. Есть только такие как например опера или IE, в этих браузерах для того, что бы флешь заработал правильно его нужно для начала активировать.

Пример кода для вставки простого флешь баннера:
 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=7,0,19,0"
width="ШИРИНА" height="ВЫСОТА" title="НАЗВАНИЕ">
 
<param name="movie" value="http://АДРЕС ФЛЭШКИ">
 
<param name="quality" value="high">
 
<embed src="http://АДРЕС ФЛЭШКИ" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="ШИРИНА" height="ВЫСОТА"></embed>
 
</object>

Пояснение к коду:
 
ШИРИНА - ширина публикуемого файла.
ВЫСОТА - высота публикуемого файла.
При необходимости ширину и высоту можно пропорционально изменять.
 
НАЗВАНИЕ - любое, выбирается самостоятельно.
Самый обыкновенный title, придумывается что-то соответствующее поисковым запросам.
 
АДРЕС ФЛЭШКИ - адрес swf файла в Интернете.

Ну вот в принципе и всё, что нужно для вставки баннера с помощью такого простого кода можно раздавать свой баннер для вставки его на других сайтах.
  
Ниже я опубликую ссылку на небольшой бесплатный видео курс, который состоит из четырех виде:
  1. В первом мы разберем что такое вообще баннер и из чего состоит простой и анимированный баннер.
  2. В втором я расскажу как создать в фотошоп файл анимации gif.
  3. В третьем рассказывается как создать флеш баннер и установить ссылку, а так же как добавить звуковое сопровождение для флешь баннера.
  4. В четвертом как установить этот флеш баннер на сайт с помощью кода, а так же как это сделать в редакторе joomla.
  5. И в пятом маленький секрет в котором я наглядно покажу как можно добавить ссылку на флешь баннер, используя только HTML код и стили CSS.
 
 

Скачать бесплатно видео курс.

Комментарии   

 
# Ihor 06.04.2012 09:04
Спасибо, очень познавательная статья, и главное, все доступно и понятно :roll:
Ответить | Ответить с цитатой | Цитировать
 
 
# ARTCLUB design 27.09.2012 20:08
Спасибо за информацию, будем делать банер!
Ответить | Ответить с цитатой | Цитировать
 
 
# без имени 16.02.2013 20:50
"АДРЕС ССЫЛКИ - адрес, на который баннер будет направлять после клика."

и куда вот интересно это надо вставлять?!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Админ. 20.02.2013 22:50
Цитирую без имени:
"АДРЕС ССЫЛКИ - адрес, на который баннер будет направлять после клика."

и куда вот интересно это надо вставлять?!!

Прошу прощения это была просто опечатка, которая была исправлена. И для того что бы было уже точно все понятно. Я записал маленький бесплатный видео курс. В котором решил рассказать и показать наглядно как это все делается. А так же маленький секрет, как можно с помощью кода HTML добавить ссылку на флешь баннер. Ссылка на видео курс находится сразу под видео внизу этой статьи.
Ответить | Ответить с цитатой | Цитировать
 
 
# Руслан 21.02.2013 07:27
Спасибо!
Как всегда, всё доступно и понятно!
Ответить | Ответить с цитатой | Цитировать
 
 
# Георгий 07.03.2013 19:21
Спасибо! Я сам долго мучился над баннером. А это то, что мне не доставало.
Ответить | Ответить с цитатой | Цитировать
 
 
# Виталий 19.05.2013 10:07
Спасибо огромное, как раз то, что искал!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ольга 24.09.2013 02:01
Большущее спасибо. Нашла все и сразу в одном месте :-)
Ответить | Ответить с цитатой | Цитировать
 
 
# Костян 12.11.2013 17:02
Спасибо, информация полезная! Можно пользоваться генератором кода баннера. Удобная штука, сам пользуюсь!
Ответить | Ответить с цитатой | Цитировать
 
 
# Админ. 12.11.2013 17:32
Цитирую Костян:
Спасибо, информация полезная! Можно пользоваться генератором кода баннера. Удобная штука, сам пользуюсь!

Конечно можно пользоваться для создания баннера и онлайн генераторами, никто и не говорит, что нельзя. Можно и сайт полностью на конструкторе создать... Но знать, как это сделать ручками, я думаю, не помешает никому...
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий

В комментариях запрещается:
1) Писать оскорбительные выражения в сторону как администратора, модератора так и других пользователей сайта. (За такое нарушение сразу бан)
2) Реклама в любом ее проявлении, а так же рекламные ссылки на свои сайты, партнерские ссылки, для ссылки на свой сайт нужно использовать специальное поле для добавления ссылки.
3) Прежде чем писать комментарий и задавать вопрос обязательно убедитесь, что на ваш вопрос точно нет ответа на сайте. Так же на сайте есть форум, где вы можете задавать вопросы другим участникам этого форума...
ВНИМАНИЕ: ПРАВИЛА МОГУТ ДОПОЛНЯТЬСЯ И ИСПРАВЛЯТЬСЯ, В ТЕЧЕНИИ ВРЕМЕНИ СУЩЕСТВОВАНИЯ САЙТА БЕЗ ПРЕДУПРЕЖДЕНИЯ. ПОЭТОМУ ЧИТАЙТЕ ИХ ОБЯЗАТЕЛЬНО, ВО ИЗБЕЖАНИЕ НЕДОРАЗУМЕНИЙ.


Защитный код
Обновить

 

 

 

Custom Search

 

 

Читаем так же:

Отправить в FacebookОтправить в Google BookmarksОтправить в TwitterОтправить в LinkedInОтправить в BobrdobrОтправить в LivejournalОтправить в MoymirОтправить в OdnoklassnikiОтправить в VkcomОтправить в Yaru