Логотип

Как создать сайт

Всё что нужно для создания сайта!

Как разместить баннер на сайте ucoz


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

Баннер - это картинка которая размещается на сайте и если на эту картинку кликнуть мышкой нас перекинет на другую страницу сайта или на другой сайт, к примеру на сайт рекламодателя.

Обычно баннеры используются как рекламные объявления на сайте, при помощи такого баннера проще простого заинтересовать рекламой посетителя сайта. И так, надеюсь теперь вы понимаете что такое баннер, и если это так - тогда давайте рассмотрим поближе этот вопрос и узнаем как разместить баннер на сайте ucoz.

Виды баннеров

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

17197-1

3 инструмента для размещения баннера

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

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

Сторонний код

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

disain

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

Шапка сайта

Начнём пожалуй с самого простого, это с верхней части сайта её называют (Шапка сайта). К примеру мы хотим чтобы наш баннер был установлен в верхней части сайта, здесь -

shapka

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

werxnjaja

Должна открыться вот такая страница с вот таким окном.

stranicaВ данном окне мы видим код который настраивает шапку сайта. В это окно нужно вставить наш код с рекламой, но просто его так не вставишь, для этого нужны доп.коды, без них реклама на сайте будет отображаться не в том месте где нам нужно. И так - нам нужно раздвинуть строчки кода что-бы освободить место для нашего скрипта и в пустое место прописать вот такой вот код -

divskodНа каждом сайте шаблоны разные и в какую строчку вписать данный код будет зависит от количество кода который присутствует в данном окне, так что здесь вам нужно будет работать методом тыка, попал не попал. Но примерный ориентир, это под логотипом сайта, там где написано мой сайт. Давайте разберём сам код который мы вписали в шапку сайта.

И так? это обычный тег div который пишется вот так

<div> Сюда помещается содержимое блока </div> Его ещё называют блок див. Как мы наблюдаем код состоит из двух частей, с открывающим тегом и закрывающим. Различие между закрывающим и открывающим тегом только в косой черте. </div> - это закрывающий тег. Такие теги называют парными или контейнерами. Между открывающим и закрывающим тегом помещаются другие теги или коды и даже простой текст. В данном случае мы туда поместим наш рекламный код. Данный блок див нам нужен как контейнер при помощи которого мы будем двигать нашу рекламу в любое место на сайте. А двигать мы будем при помощи дополнительных кодов, которые идут как параметры к данному тегу div их называют атрибуты.

Атрибуты всегда идут в паре, а пара атрибута это значение. Атрибуты с ихними значениями вписываются в любой открывающийся тег, или одинарный. (Одинарные теги не имеют закрывающего тега).

Вот так выглядит пример с атрибутом и значением. -

Пример <div style='float:left;'> содержимое блока </div>. Здесь мы видим слово style это атрибут, дальше в коде мы видим равно, равно обозначает что здесь кончается атрибут и начинается значение, значение пишется или в двойных кавычках или в одинарных. Почему так происходит разберём как нибудь в другой раз. В тег может помещаться большое количество атрибутов и их значений, на картинке выше мы видим один атрибут и два значения. Что бы написать второй атрибут в тег, достаточно после одинарных или двойных кавычек поставить пробел.

Атрибуты задают задачу тегам что нужно делать, а значения для атрибута говорит как и насколько это сделать. Давайте разберём на примере - <div align='center'>Содержимое блока</div>, атрибут align задаёт блоку DIV правило, что нужно выровнять блок, а значение со словом center говорит как это сделать, в нашем случае по центру. Значение у атрибута align может быть и left и center или right что значит ВЛЕВО, По центру, Вправо.

Давайте разберём наш атрибут который присутствует в коде, он называется style. Style говорит нашему тегу <div> что нужно добавить стили css, а значение float говорит что блок div нужно поднять и передвинуть над другими блоками, у нас присутствует ещё один параметр left, которое передвигает блок влево.

В коде у нас присутствует и второе значение margin. Данное значение говорит браузеру что нужно сделать отступ от блока. Отступы задаются при помощи цифр в пикселей, всего четыре параметра которые задаются по часовой стрелке. Отступить от блока на 41px сверху, 54px делают отступ от блока с право, ноль задаёт блоку отступ снизу, последний ноль задаёт отступ слева. Обычно нули пишутся без букв px.

Здесь вы сами можете подобрать на сколько пикселей отступить сверху или с право от блока, для этого просто впишите за место 41px к примеру 64px, или за место 54px впишите 154px. Таким образом при помощи значения margin мы можем двигать нашу рекламу в любое место на сайте, а точнее в верх в право влево и вниз.

И так, если блок div был вписан в наше окно, осталось в него разметить код баннера, и нажать кнопку сохранить.

soxranitПерейдите на свой сайт и посмотрите появился ли блок с баннером, если блок появился но он отображается не в том месте где вы хотите, тогда просто поиграйте с пикселями у значения margin что-бы подвигать блок. Должно получится вот так -

banner

Кстати

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

Заключение

В этом уроке мы разобрались с первым вариантом добавления баннера на сайт, в следующем уроке разберём как работать с баннером который создадим при помощи разметки HTML, а так-же подробно изучим инструмент который присутствует на самом конструкторе ucoz. Этот инструмент помогает не только добавлять баннера на сайт но и отслеживать статистику по переходам на другие сайты.

Задай свой вопрос в комментариях? или в специальном разделе.
Подсказка:

Сайт нужно делать для людей но в то-же время не забывать о поисковых системах.

Курс ещё не готов, но подписчики получат его первыми - как только работа будет закончена. На данный момент 23.08.2017 записано 19 теоретических уроков и 0 практических. Теоретический кус Готов! "Как создать, настроить, наполнить и раскрутить сайт на uCoz"