Главная » Статьи » Сайтостроение

КАК СОЗДАТЬ РЕКЛАМНЫЙ БАННЕР

КАК СОЗДАТЬ ПРОСТЕЙШИЙ РЕКЛАМНЫЙ БАННЕР

        В настоящее время реклама заполонила все информационное пространство. Интернет тоже не является исключением. Практически на всех сайтах вы сталкиваетесь с этой назойливой информацией. Что поделать, содержание сайта требует некоторых затрат. Аренда дискового пространства, покупка доменного имени, приобретение  контента (для тех, кто сам не умеет или не хочет писать), консультирование специалистами хостинговой компании (как это делается на uCoz, хотя я так и не понял, за что они берут плату), все это стоит денег, пусть не больших, но кровных. Размещение рекламы на сайте позволяет окупить его содержание, а если сайт хороший и раскрученный, то и заработать.

        Одним из методов применения рекламы в интернете является создание и размещение на сайтах рекламных баннеров. Последние можно размещать где угодно. В шапке сайта, в подвале, в боковых колонках и даже в контенте. Все зависит от вашей фантазии. Как размещать рекламный баннер я уже описывал в статье «Размещение рекламы google adsense на сайтах uCoz». Сейчас мы рассмотрим методику создания простейшего рекламного баннера, которая может оказаться полезной особенно тем, кто не разбирается в HTML- кодах. Для чего вообще нужно создавать рекламные баннеры? Размещение вашей рекламы на чужих сайтах обычно стоит денег. Но, если вам неохота платить, вы можете обменяться рекламными баннерами с другими владельцами сайтов на взаимовыгодных условиях. А вот создание своего баннера - личное дело владельца сайта, если он не решил воспользоваться платными услугами профессиональных рекламных компаний.

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

        Итак, если вы не разбираетесь в HTML- кодах, для создания рекламного баннера вам понадобится следующий набор инструментов:

 
  1. Компьютер с любой операционной системой семейства Windows;
  2. Графический редактор;
  3. Визуальный HTML редактор.

        В принципе, операционная система не обязательно должна принадлежать к семейству Windows, но в ОС  Windows уже есть графический редактор – это программа «Paint», которая встроена в систему.

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

        К стандартным размерам относятся баннеры, применяемые в системе google adsense, такие как: 728х90 (полноразмерный баннер), 336х280 (большой прямоугольник), 300х250 (средний прямоугольник), 160х600 (широкий небоскреб) и 300х360 (объявление на полстраницы). Так же могут применяться и другие размеры.

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

 

        А. Создание графического элемента баннера и приведение его к необходимым размерам.

        - Определение допустимых размеров баннера

        Если вы планируете рекламировать свой сайт для повышения его посещаемости, вам необходимо иметь какой-нибудь рисунок (фотографию), отображающий суть сайта или его отдельных разделов. Такой рисунок вы можете создать, воспользовавшись имеющимся у вас графическим редактором. Конечно, возможности платных графических редакторов значительно выше, чем  бесплатных. Но, для нашего примера подойдет и тот, что встроен в операционную систему Windows. Так же для упрощения материала не будем специально создавать рисунок, а воспользуемся любой имеющейся фотографией.

        После того, как вы определились с графическим элементом (в нашем случае – выбором фотографии), необходимо привести его величину к определенным размерам. Как отмечалось выше, размеры могут быть стандартными и произвольными, и от выбора размеров рекламного баннера зависит, как он впишется в сайт, на котором будет размещен.

        К примеру, если вы планируете разместить рекламный баннер в одном из блоков боковой колонки сайта, размещенного на хостинге uCoz, то необходимо согласовать его размер по ширине с допустимым размером этого блока. Иначе блок, в котором вы будете размещать баннер, примет неприглядный вид. Он может стать двойным или даже тройным.  Допустимый размер по ширине определяется очень просто. Создаете снимок экрана, на котором открыт сайт, где вы планируете разместить свой баннер. Снимок экрана делается нажатием кнопки «Print Screen» на клавиатуре вашего компьютера. Затем открываете программу «Paint».  Ее вы найдете в списке «Стандартные», если откроете меню «Пуск», а затем нажмете кнопку «Все программы». В главном меню программы «Paint», с помощью кнопки «Вставить» (см.3 Рис.1) вставляете свой скриншот (снимок экрана) в окно программы «Paint». С помощью кнопки «Выделить» (см.4 Рис.1) выделяете рабочую зону блока, а остальное обрезаете нажатием на кнопку «Обрезать» (см.5 Рис.1), в результате получаете примерно такое изображение, как на Рис.1 (см. 1 Рис.1). В нижней части окна программы «Paint» у вас отобразится размер рабочей зоны блока (см. 2 Рис.1). Из Рис.1 видно, что допустимый размер баннера по ширине в нашем случае составляет порядка 181 пикселя. Размер по высоте лимитируется только чувством меры и ценой за использованную площадь сайта, где вы собираетесь размещать баннер. Следует отметить, что допустимый размер баннера по ширине для сайтов, размещенных на хостинге uCoz, зависит от дизайна сайта, и только для него является постоянной величиной.

         - Непосредственное создание графического элемента баннера

        Теперь приступаем непосредственно к созданию баннера. Для начала подбираем (создаем) подходящую картинку и открываем ее все в той же программе «Paint» (см. Рис.2). Для этого в новом окне программы нажатием на кнопку «Paint» (см.5 Рис.2) открываем окно выбора заранее подготовленного файла на вашем ПК. В открывшемся меню (см. Рис.3) выбираем кнопку «Открыть» (см.1 Рис.3), после чего у вас откроется окно выбора файлов (в статье это окно не показано). После того как файл выбран, в окне программы «Paint» откроется его изображение (см.0 Рис.2). Теперь нам нужно привести изображение к необходимым размерам, для этого нажмите кнопку «Изменить размер» (см.1 Рис.2). После чего появится окно «Изменение размера и наклона» (см.2 Рис.2). Там вы должны выбрать единицу измерения «пиксели» (см.3 Рис.2) и в окне «По горизонтали»  (см.6 Рис.2) установить необходимую величину ширины баннера. После того, как вы нажмете кнопку «ОК» (см.4 Рис.2), изображение примет необходимый вам вид.

        Остается только сохранить внешний вид созданного вами баннера. Для этого нажмите кнопку «Paint»  (см.5 Рис.2) и в открывшемся меню Рис.3 нажмите кнопку «Сохранить как» (см.2 Рис.3). Затем выберите формат «JPEG» (см.3 Рис.3) и в открывшемся окне сохранения введите такое название файла, какое будет подходить вашему баннеру, и по которому вы всегда сможете его найти.

        Б. Создание и редактирование HTML- кода рекламного баннера

        - Загрузка графического элемента баннера на сайт

        Пока что вы создали рисунок (изображение), которое должно соответствовать вашему баннеру, и он находится на вашем Компьютере, т.е. недоступен для пользователей интернета. Теперь его необходимо разместить на любом сайте, но лучше на вашем, чтобы он был доступен для всеобщего обозрения. Как загружать файлы с помощью файлового менеджера, вы, скорее всего, умеете, ну а  те, кому это в новинку, могут посмотреть статью «Как заманить поисковых роботов на свой сайт». Эта статья посвящена другому вопросу, но в ней подробно написано, как загружать небольшие файлы на сайты, размещенные на хостинге uCoz. После этого можно приступать непосредственно к созданию HTML- кода рекламного баннера.

        Хочу обратить ваше внимание на некоторые особенности загрузки файлов. Во-первых, ни в корневом каталоге, ни в какой любой папке файлового менеджера не должно быть более 200 файлов (папок), иначе сайт будет работать неустойчиво. Во-вторых, перед загрузкой рисунка баннера в общих настройках сайта отключите накладывание водяного знака на рисунок. Иначе он будет присутствовать на вашем баннере. Эти ограничения свойственны не только  сайтам на хостинге uCoz, но и  сайтам, размещенным на других хостингах.

        - Создание HTML- кода рекламного баннера

        Не бойтесь, вам не придется самим набирать все эти крючки и загогулинки. Для этого существует множество программ, работа с которыми не сильно отличается от работы с другими программами, имеющими графический интерфейс. Скачайте и установите бесплатную программу «Nvu». Это визуальный HTML редактор, в котором вы в основном будете работать с понятным вам интерфейсом. Программу следует скачивать с официального сайта. Эта программа еще хороша и тем, что имеет русскоязычный интерфейс.

        После того, как вы скачали и установили программу, запустите ее. Если вы не знаете, как это сделать, воспользуйтесь подсказками из статьи «Различные способы запуска программ». У вас откроется окно Рис.4.

        В окне программы «Nvu» выберите пункт меню «Таблица» (см.1 Рис.4). Перед вами откроется содержимое меню этой кнопки (см.2 Рис.4). На скриншоте  это меню я сместил вправо, чтобы оно не мешало восприятию информации. В этом меню выберите  кнопку «Вставить» (см.3 Рис.4), а затем кнопку «Таблица» (см.4 Рис.4).

        Перед вами откроется окно «Вставка таблицы» (см.5 Рис.4), которое я тоже сместил.

        В окне «Вставка таблицы» левой кнопкой мыши щелкните на первой ячейке таблицы (см.6 Рис.4), после этого в рабочем поле программы «Nvu» появится таблица, состоящая из одной ячейки.

        Теперь настроим таблицу. Для этого в области таблицы щелкните правой кнопкой мыши, перед вами откроется контекстное меню (см.1 Рис.5). В контекстном меню выберите кнопку «Свойства ячейки таблицы» (см.2 Рис.5). Перед вами откроется меню «Свойства таблицы» (см.3 Рис.5). Введите значения размеров ширины и высоты создаваемого вами баннера в соответствующие поля (см.4 и 5 Рис.5). В окне «Свойства таблицы» вы также можете произвести выравнивание содержимого таблицы, но, с учетом того, что размеры таблицы мы подогнали под размеры графического элемента баннера, это делать не обязательно. После этого нажмите кнопки «Применить» (см.6 Рис.5) и «ОК» (см.7 Рис.5). Все, вы задали размеры вашей таблицы.

        После того, как вы настроили вашу таблицу, необходимо вставить в нее созданную вами картинку. Конечно, можно вставлять картинку и непосредственно с компьютера, но тогда ваш рисунок будет виден только на вашем компьютере. Для того, чтобы его могли обозревать все, откройте рисунок, загруженный на ваш сайт. Чтобы это сделать, войдите в панель управления вашим сайтом и откройте «Файловый менеджер», в его окне откройте папку, в которой вы разместили необходимую вам картинку (см.1 Рис.6). Чтобы открыть картинку, сохраненную на вашем сайте, левой кнопкой мыши щелкните по кнопке «Посмотреть файл» (см.2 Рис.6).

        В новой вкладке вашего браузера откроется загруженная вами картинка. Щелкните по нему правой кнопкой мыши и в контекстном меню выберите пункт «Копировать картинку». Затем вставьте полученную картинку в созданную вами таблицу (состоящую из одной ячейки) в программе «Nvu».  Чтобы это сделать, левой кнопкой мыши поставьте  курсор в ячейку и нажмите кнопки «Ctrl + V». Знак «+» нажимать не нужно, он означает, что нажатие этих клавиш производится одновременно.

        После этого у вас в окне программы «Nvu» в таблице появится изображение вашего рисунка (см. Рис.7). Теперь остается немного доработать ваш баннер.

        - Создание активной ссылки и всплывающего текста

        Откройте рекламируемый сайт на той странице, на которую вы хотели бы, чтобы попадал  пользователь интернета после щелчка по вашему баннеру, и скопируйте URL- адрес этой страницы.

        Перейдите к окну программы «Nvu» (Рис.7) и щелкните левой кнопкой по вашему рисунку (см.1 Рис.7). По контурам рисунка появятся небольшие квадратики. После этого на панели инструментов программы «Nvu» нажмите кнопку «Ссылка» (см.2 Рис.7). У вас откроется окно «Свойство изображения» (см.3 Рис.7). Вставьте в поле адресной строки (см.4 Рис.7) скопированный ранее URL- адрес выбранной вами страницы рекламируемого сайта и нажмите кнопку «ОК» (см.5 Рис.7).

        После этого у вас появится «Окно-предупреждение» (см.1 Рис.8), в котором вам необходимо только нажать кнопку «ОК» (см.2 Рис.8).

        В следующем окне «Свойства изображения» (см.3 Рис.8) необходимо ввести всплывающую подсказку, которая будет появляться на экране, когда пользователь интернета будет наводить стрелку мышки на ваш баннер (см.4 Рис.8), к примеру, «Брендовая одежда из Европы» или «Фильмы на любой вкус». Текст не должен быть слишком длинным, но должен привлекать внимание пользователя интернета и отражать суть рекламируемой вами страницы.

        Вы можете ввести альтернативный текст (см.5 Рис.8) или не использовать альтернативный текст (см.6 Рис.8). В завершение вам остается нажать кнопку «ОК» (см.7 Рис.8).

        После проделанной работы желательно сохранить созданный вами баннер. Для этого на панели инструментов программы «Nvu» нажмите кнопку «Файл» (см.1 Рис.9). После чего у вас откроется окно с меню кнопки «Файл» (см. 2 Рис.9). В этом меню выберите команду «Сохранить как» (см.3 Рис.9). У вас появится окно, в котором вам будет предложено ввести имя созданного вами баннера. После ввода имени файла и нажатия кнопки «ОК» (это окно не отображалось в статье) у вас откроется новое окно, где вам будет предложено определить место хранения файла. С последним окном у вас не будет проблем, т.к. оно полностью соответствует окну сохранения всех других файлов на вашем ПК.

        Следует учитывать, что созданная нами таблица (ее рамка) имеет свои размеры. Чтобы эти размеры не повлияли на размеры баннера, следует избавиться от рамки таблицы. Для этого при выделенном рисунке (см.1 Рис.10) на панели инструментов программы «Nvu» необходимо нажать кнопку «Таблица» (см.2 рис.10). В открывшемся меню (см.3 Рис.10) нажмите кнопку «Свойства таблицы» (см.4 Рис.10). Затем в окне «Свойства таблицы» (см.5 Рис.10) поставьте значения обрамления и полей рамки (см.6 Рис.10) равным «0». После этого нажмите последовательно кнопки «Применить» (см.7 Рис.10) и «ОК» (см.8 Рис.10).

        - Получение HTML- кода

        По умолчанию рабочее окно программы «Nvu» открывается на вкладке «Предварительный просмотр» (см.4 Рис.9). Но, как отмечалось в статье «Размещение рекламы google adsense на сайтах uCoz», рекламные баннеры распространяются и размещаются в виде HTML- кода, который размещается на других сайтах. Чтобы получить  HTML- код созданного вами баннера, переведите режим работы рабочего окна программы «Nvu» в режим «Код», для чего нажмите кнопку «Код» (см.5 Рис.9). После этого в рабочем окне вашей программы появится HTML- код созданного вами баннера (см. Рис.11). Выделите этот код и скопируйте в буфер обмена (нажмите кнопки Ctrl + C). Теперь этот код можно вставлять в другие ваши сайты или передавать его для обмена баннерами. Но прежде, чем передавать код для установки на сторонних сайтах, проверьте работоспособность созданного вами баннера на своем сайте. Если вы сделали все нормально, ваш баннер будет иметь отображаемый графический элемент, при наведении на него курсора будет появляться всплывающий текст, а щелчок на баннере будет перенаправлять пользователя на рекламируемый сайт.

        А теперь вкратце рассмотрим некоторые особенности размещения рекламных баннеров на сайтах. Этот вопрос уже подробно рассматривался в статье «Размещение рекламы google adsense на сайтах uCoz». Для более полного изучения данной темы целесообразно прочитать статью «Как установить счетчик от TOP 100 на сайте uCoz».  

        Итак, разместим созданный нами баннер на сайте uCoz в один из блоков боковой колонки. Для этого войдите на сайт как администратор и запустите конструктор блоков. Как это делать написано в статье «Использование конструктора блоков на сайтах uCoz». Создайте новый блок и воспользуйтесь кнопкой «Настройка блока». В окне «Управление содержимым блока» (см. Рис.12-1) выберите вкладку «HTML» (см.1 Рис.12-1). В новом окне (см. Рис.12-2) в поле ввода HTML кода (см.1 Рис.12-2) просто вставьте код созданного вами баннера, скопированного из окна Рис. 11, а затем нажмите кнопку «Сохранить» (см.2 Рис.12-2). После того, как вы внесли изменения в свой сайт, не забудьте сохранить эти изменения, как это написано в статье «Использование конструктора блоков на сайтах uCoz».

        Все, вы успешно разместили баннер, но есть одна небольшая, но важная особенность. При переходе с такого рекламного баннера на рекламируемый сайт в окне своего браузера, пользователи вашего сайта будут покидать ваш сайт. Чтобы этого не происходило, необходимо сделать так, чтобы рекламируемый сайт открывался в новой вкладке. Для этого воспользуйтесь атрибутом  «target="_blank"». Допишите этот атрибут в код вашего баннера после адреса ссылки на рекламируемый сайт, как это сделано на Рис.12 (см.3 Рис.12-2). Если вы сделали все правильно, ваш баннер будет перенаправлять пользователя вашего сайта на рекламируемый сайт, а сам рекламируемый сайт будет открываться в новой вкладке.

        P.S. Корректировку HTML-кода рекламного баннера (дописывание атрибута «target="_blank"» после адреса рекламируемого сайта) целесообразно делать в окне программы «Nvu» Рис.11.

        Иценко Александр Иванович

Категория: Сайтостроение | Добавил: inok (20.10.2014) | Автор: Иценко Александр Иванович W
Просмотров: 2157 | Теги: размеры применяемых баннеров, создать рекламный баннер | Рейтинг: 5.0/20
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]