1. висновок

Спонсор поста: адмініструються VPS на XEN від 10 $ без оверселлінг з тестовим періодом 14 днів від Inferno Solutions. Відгуки на zapili.net

Добрий вечір, сьогодні я хотів би розповісти про те, як розмістити банер на сайті. Багато задають мені це питання, значить проблема актуальна, постараюся Вам пояснити весь цей нескладний процес. Хочу відразу сказати, що я не є професіоналом в html, php, css та ін. Мовами програмування, я взагалі погано в них розбираюся, але те, що мені потрібно, я потихеньку трохи засвоїв. І якщо цей шлях, який я напишу нижче, не зовсім правильний, ускладнений, "сміттєвий" - "вибачайте", не всім дано все знати :). Я всього лише ділюся з Вами тим, як я вивів банери у себе в шапці.

Кожен по-своєму розміщує банери, хтось навіть підбирає теми тільки такі, куди вбудовані рекламні банери.

Наведу приклад розміщення банерів як на моєму блозі WPnew.ru - в 2 колонки. Тобто, це той випадок, коли Ви можете бачити зліва назву сайту, його логотип, як це зазвичай буває, а справа ж стоять банери.

Для початку я додав в файл теми style.css в самий кінець наступні рядки:

Тут клас columnslogo відповідає за виведення логотипу, назви сайту і т.п. (зауважте, варто float: left - виводиться зліва). А columnshead - за виведення банерів (зауважте, тут варто float: right - висновок справа, саме цей оператор є ключовим моментом, тобто ми "притискаємо об'єкти" до лівого і правого краю відповідно. Також варто задати ширину і висоту (в разі гумовими шаблонами все складніше), в моєму випадку width: 470px (ширина) у обох класів однакова, тобто я, виходить, розділив шапку, яка розміром приблизно 1000px (трохи менше) на 2 колонки по 470 пікселів (до речі, можливо Вам буде цікаво почитати урок про CSS ).

Висота (height) в columshead - 133 пікселів, так як розміщено 2 банера розміром 468 * 60 px + відступи між ними і від країв. Тобто, якщо Ви ставите тільки 1 банер, то значення висоти можна зменшити. Іноді буває корисним (коли 1 банер наприклад) виділити кордон банера рамкою, в даному випадку за це відповідає border: 0px solid #FFFFFF; тут 0px - це ширина рамки (значить в моєму випадку вона прихована), solid означає, що лінія суцільна (НЕ пунктирна, точкова і т.п.), а #FFFFFF, як Ви вже, напевно, здогадалися - колір рамки (в моєму випадку - білий).

Це було те, що стосувалося файлу style.css, а тепер перейдемо безпосередньо до висновку банерів на сайті. Для цього, якщо ми хочемо поставити банери в шапку, відкриваємо файл header.php і шукаємо місце, де виводяться логотип, назву сайту і т.п. Ось так це виглядає в моєму випадку:

1 - "права частина" шапки, умови якого ми задали вище в style.css.

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

3 - висновок першого банера, який виводиться безпосередньо (в даному випадку банер "Хостенко", який Ви бачите в шапці). Ось його повний код:

Ви можете вивести зображення (наприклад банер "Купити рекламу") просто помінявши значення img src - там вкажіть повну адресу до банера, width = "468" height = "60" - ширина і висота банера, також Ви можете поставити своє посилання на сторінку реклами на самому початку після в a href = (якщо йдеться про те, як поставити свій банер "Купити рекламу").

4 - тут код Rotaban , Який йде після "закриття" (</ div>) стилю першого банера, тобто після відступів.

5 - висновок лівій частині шапки (клас ми вже поставили в style.css - див. Вище).

6 - клас, який виглядає так (висновок логотипу перед назвою сайту):

7 - відступ зліва для назви сайту, опису і т.п.

висновок

Як бачите, по-моєму, нічого складного немає. Якщо у Вас виникнуть труднощі, спробуйте "тупо скопіювати" все з цього уроку (аналогічно вивести банери), а вже потім, за допомогою чудового інструменту FireBug , Поправити все, як Вам потрібно. На сьогодні все, до зустрічі на наступних уроках!