Як розмістити банер на сайті ucoz | Як створити сайт на конструкторі, на движку або своїми руками

  1. види банерів
  2. 3 інструменту для розміщення банера
  3. сторонній код
  4. Шапка сайту
  5. До речі
  6. висновок

Давайте сьогодні попрацюємо з графікою на нашому сайті, а якщо бути точним, торкнемося таку тему як банер. Що взагалі таке банер? Опишу своїми словами як бачу це я.

Дуже важливо! Якщо раптом, перед тим як вивчити урок ви виявили що вид вашої панелі відрізняється від того що описано в уроці, не лякайтеся! Просто переведіть нову панель на стару. Як це зробити? Ось в цій інструкції .
Рекомендую почитати:
Всього за 200р.


Банер - це картинка яка розміщується на сайті і якщо на цю картинку клікнути мишкою нас перекине на іншу сторінку сайту або на інший сайт, наприклад на сайт рекламодавця.

Зазвичай банери використовуються як рекламні оголошення на сайті, за допомогою такого банера простіше простого зацікавити рекламою користувача сайту. І так, сподіваюся тепер ви розумієте що таке банер, і якщо це так - тоді давайте розглянемо ближче це питання і дізнаємося як розмістити банер на сайті ucoz.

види банерів

Як я сказав вище банер це картинка, а картинка на сайті може бути різних розмірів. Наприклад зустрічаються банера квадратні, горизонтальні, вертикальні (їх ще називають хмарочоси), так-же зараз з'явилися адаптивні, це ті банера які підлаштовуються під розміри монітора. Розміри у банерів можуть бути різні, але роль відіграють одну й ту ж саму, залучити відвідувача що-б він натиснув на нього.

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

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

Якщо ви просто хочете розмістити рекламний банер на ваші послуги які рекламуєте на вашому ж сайті, і у вас немає такої мети що-б відслідковувати статистику по переходом з даного банеру, тоді такий вид реклами можна організувати за допомогою звичайного HTML коду. Ну і третій варіант це коли у вас на сайті з'явився власний рекламодавець і навіть не один, тоді ось тут знадобиться інструмент який допомагає відслідковувати кожен банер на сайті і вести статистику, скільки відвідувачів перейшло на сайт рекламодавця.

сторонній код

Почнемо мабуть з варіанту номер один - це коли вам сторонній сервіс надав рекламний код (Скрипт), і ви його повинні розмістити у себе на сайті. В даному прикладі я покажу як на сайті юкоз розміщувати даний скрипт, який ви перед цим належний отримати у рекламному майданчику наприклад Googleadsense. І так, якщо ви отримали код, зайдіть в панель управління, як це зробити дивимося тут і перейдіть по кнопці дизайн, відкриється випадають вікно в якому натисніть на кнопку управління дизайном (шаблони).

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

Шапка сайту

Почнемо мабуть з самого простого, це з верхньої частини сайту її називають (Шапка сайту). Наприклад ми хочемо щоб наш банер був встановлений у верхній частині сайту, тут -

Для цього на сторінці яку ми відкрили, знайдіть кнопку верхня частина сайту і натисніть на неї.

Має відкритися ось така сторінка з ось таким вікном.

В даному вікні ми бачимо код який налаштовує шапку сайту В даному вікні ми бачимо код який налаштовує шапку сайту. У це вікно потрібно вставити наш код з рекламою, але просто його так не вставиш, для цього потрібні доп.коди, без них реклама на сайті буде відображатися не в тому місці де нам потрібно. І так - нам потрібно розсунути рядки коду що-б звільнити місце для нашого скрипта і в порожнє місце прописати вот такой вот код -

На кожному сайті шаблони різні і в який рядок вписати даний код буде залежить від кількість коду який присутній в даному вікні, так що тут вам потрібно буде працювати методом тику, потрапив не потрапив На кожному сайті шаблони різні і в який рядок вписати даний код буде залежить від кількість коду який присутній в даному вікні, так що тут вам потрібно буде працювати методом тику, потрапив не потрапив. Але приблизний орієнтир, це під логотипом сайту, там де написано мій сайт. Давайте розберемо сам код який ми вписали в шапку сайту.

І так? це звичайний тег 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 був вписаний в наше вікно, залишилося в нього розмітити код банера, і натиснути кнопку зберегти.

Перейдіть на свій сайт і подивіться з'явився блок з банером, якщо блок з'явився але він відображається не в тому місці де ви хочете, тоді просто пограйте з пікселями у значення margin що-б посувати блок Перейдіть на свій сайт і подивіться з'явився блок з банером, якщо блок з'явився але він відображається не в тому місці де ви хочете, тоді просто пограйте з пікселями у значення margin що-б посувати блок. Має вийти ось так -

Має вийти ось так -

До речі

Про стилях ми поговоримо як небудь іншим разом, зараз просто запам'ятайте що стилі допомагають оформляти наш сайт, наприклад задати задній фон на сайті , Прикрасити текст, поставити в будь-яке місце на сайті той чи інший елемент в нашому випадку це пересунути рекламу в право.

висновок

У цьому уроці ми розібралися з першим варіантом додавання банера на сайт, в наступному уроці розберемо як працювати з банером який створимо за допомогою розмітки HTML, а так-же детально вивчимо інструмент який присутній на самому конструкторі ucoz. Цей інструмент допомагає не тільки додавати банера на сайт а й відстежувати статистику по переходах на інші сайти.

Важливо! Якщо раптом у вас вийшло налаштувати сайт за допомогою моїх уроків, і вам вже не в перший раз він допомагає розібратися з різними завданнями, тоді не забудьте подякувати Автора в коментарях! Після подяки Автор знає що праця була цінний і корисний, а той час, який було витрачено на урок, не витрачено в пусту і згодилося хорошим людям.
Дякую за увагу і розуміння.
Реклама:

  1. Подяка буває різна, підтримка проекту в грошовому вираженні.
  2. Поділиться посиланням, на приклад на своєму сайті або в соц мережах.
  3. Залишити коментар на сайті.

Є багато різних варіантів як віддячити Автора.

Що взагалі таке банер?
Як це зробити?
Успадковує сторінці у нас виникає питання, а в яке місце на сайті розмістити банер?
І так?