Делаем баннер для сайта

Делаем баннер для сайта (урок от админки)

Уровень урока: Для начинающих
(знание языка html почти отсутствует)
Автор урока: Stacy-chan

Итак, мы создали свой сайт и теперь хотим обменятся с кем-то баннерами. На том сайте уже есть кнопочка, код которой мы вставили себе на сайт, а как же наш собственный баннер? Конечно же, его нужно создать. Сделать сам баннер (изображение кнопки), думаю, не сложно, а вот с кодом и его размещением на странице могут возникнуть некоторые затруднения. Так что, я хотела бы уделить особое внимание именно этому вопросу. В прочем, всё по порядку:

1. Создаем изображение кнопки. Подбираем подходящую картинку и обрабатываем её в любимом графическом редакторе. Как именно это делать, описывать не буду, т.к. сама далеко не ас. Скажу только, что в итоге у нас должна получится картинка размером 88х31 (хотя можно использовать и другой стандартный размер). Пожалуйста, делайте баннеры стандартными! Админы других сайтов, и я в том числе, будут очень благодарны, если ваша кнопка не будет выбиваться из ряда других и портить дизайн. Пример готового баннера:

2. Размещаем изображение в Итернетах. Для этого загружаем его на любой хостинг для хранения изображений. Лично я использую http://ipicture.ru/. Загрузив туда картинку мы получаем ссылку на изображение. Например:

http://s1.ipicture.ru/uploads/20120908/dooZ16FU.gif

3. Составляем код для баннера. У меня получился вот такой:

Я не стану объяснять, что именно означает каждый тег, т.к. урок все-таки для начинающих. Разберём только те свойства, которые вам нужно будет поменять:

http://my-kawaii.narod.ru - адрес вашего сайта.
http://s1.ipicture.ru/uploads/20120908/dooZ16FU.gif - ссылка на изображение на хостинге.
My Kawaii - сайт, посвящённый аниме и каваю - подсказка, которая будет выводится при наведении курсора на баннер.
88 и 31 - ширина и высота изображения (менять только в том случае, если вы использовали другой размер баннера!).

4. Размещаем баннер и код на странице. Копируем код, который у нас получился и вставляем на нужную нам страницу. Теперь там появилась ссылка-картинка, ведущая на Главную страницу нашего сайта:

Но это ещё не всё. Мы же делали баннер для обмена, не так ли? Значит нам нужно, чтобы его код отображался и при этом выглядел красиво. Поэтому, мы создадим специальную рамочку. Её код выглядит следующим образом:

<textarea rows="4" cols="40">
<a href="http://my-kawaii.narod.ru" target=_blank><img src=
"http://s1.ipicture.ru/uploads/20120908/dooZ16FU.gif" border="0" width="88"
height="31" alt="My Kawaii - сайт, посвящённый аниме и каваю"></a>
</textarea>

Снова рассмотрим свойства, подлежащие замене:

4 и 40 - высота (количество видимых строк) и ширина рамочки.
<a href= ... ></a> - код баннера, составленный в предыдущем пункте.

И вот, что у меня получилось:

Теперь, любой желающий сможет поставить наш баннер себе на сайт. Задача выполнена!