Простая вёрстка в HTML. Урок №14

* 31-05-2014, 17:51 * A_Protasov * Комментариев: 0

Рейтинг:

Простая вёрстка в HTML. Урок №14

Окно фрейма, для рекламного блока.

В этом уроке мы создадим блоки для правой и левой колонки, так называемые «сайдбары». Но основной нашей задачей будет не создание самих колонок, а как я и рассказывал в

предыдущем уроке

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

Для начала создадим блоки левого и правого сайдбара. Открываем наш индексный файл и файл style.css . Находим следующий блок <td class="td3"> ниже написано «Левая колонка», вместо неё пишем следующее:

<div>Текст</div>
<div>Текст</div>
<div>Текст</div>

Да это обычные блочные элементы, три штуки. Их может быть и больше, но это уже зависит от ваших потребностей и дизайна сайта. Теперь нам надо задать стилевое оформление для этих блоков, идём в css и находим селектор класса .td3. Ниже этих правил пишем следующее:

.td3 div{
                text-align: center;
                vertical-align: top;
                height: auto;
                width: 230px;
                background-color: #FFF9D5;
                border: 2px solid #E7DDA4;
                margin: 10px auto;
}

То есть мы создали, такой же селектор классов, только для тега <div>. Теперь все теги <div> находящееся в ячейки таблицы <td class="td3">, будут подчиняться этим правилам. Сохраняем и обновляем страницу, если блоки отображаются корректно, значит, всё сделали правильно.  Тоже самое делаем для правой колонки, добавляем блоки и создаем новые правила, но уже для селектора классов .td5 и для тега <div>. Сохранили, обновили, идём дальше. Теперь попробуем вставить код рекламного баннера в один из блоков. Если вы не знаете, как создаётся

код рекламного баннера

, советую прочесть вот

здесь

, прежде чем идти дальше. Для примера я покажу фрагмент своего кода баннера:

<td class="td3">
      <div>
                  <a href="http://сайто-строитель.рф/video-kurs-prostaya-verstka-v-html.html" target="_blank">
                  <img src="http://сайто-строитель.рф/uploads/posts/2014-02/1392848805_kurs_html_2.png" width="220" height="300" alt="Бесплатный видео курс"
      title="Какой-то текс при наведении!!!" border="0" />
                  </a>
                  </div>
                  <div>Текст</div>
                  <div>Текст</div>
      </td>

     

И вот что получилось:

Рисунок №1.

 Простая вёрстка в HTML. Урок №14

Теперь нам надо создать папку и файл, куда будет необходимо переместить этот блок. В нашей корневой папки где хранятся все материалы будущего сайта, создаём папку к примеру «reklama», а в редакторе создаём новый файл вот с таким пустым кодом:

<html>
<head>
</head>
<body>
</body>
</html>

 И сохраняем его в папку «reklama», как my_banner.html. Теперь переносим из индексного файла, наш код баннера в ново созданный my_banner.html, и размещаем его между тегов BODY. Но прежде чем мы подключим наш файл к одному из блоков, необходимо задать нулевое значения для отступов, так как многие браузеры по умолчанию сразу создают их. Что впоследствии приведёт к некорректному отображению содержимого фреймового окна на сайте.  Для этого прямо в тег BODY дописываем вот такое правило:

<body style="margin:0;">

В целом у нас должен получиться следующий код:

<html>
<head>
</head>
<body style="margin:0;">
<a href="http://сайто-строитель.рф/video-kurs-prostaya-verstka-v-html.html" target="_blank">
                  <img src="http://сайто-строитель.рф/uploads/posts/2014-02/1392848805_kurs_html_2.png" width="220" height="300" alt="Бесплатный видео курс"
      title="Какой-то текс при наведении!!!" border="0" />
                  </a>
</body>
</html>

Откройте файл с кодом баннера в браузере. Проверьте, всё ли корректно отображается. Е если да то идём дальше.

Подключаем файл, с помощью фрейма.

Для подключения нашего файла через фреймовое окно необходимо использовать следующий код:

<iframe src="reklama/my_banner.html" width="220" height="300" frameborder="0" scrolling="no"></iframe>

Этот код нам необходимо вставить, в тот блок сайдбара, где мы хотим видеть нашу рекламу.  В коде всё очень просто. Мы видим открытие <iframe>, затем путь к нашему файлу с рекламой, ширина и высота, такая же, как и у нашего баннера, нулевое значение фрейм бордюра и атрибутом scrolling="no" мы отказываемся от колеса прокрутки в нашем фрейме. Сделали все правильно, значит должны увидеть отображения баннера на вашем сайте в том блоке, где вы этого хотели. Теперь поместите блок на всех созданных страницах, вашего сайта и проверьте работоспособность. Благодаря простому и не сложному трюку у нас появилась возможность заменять рекламу при необходимости, не во всех файлах нашего сайта, а только в одном. Также вы можете создать несколько фреймовых подключений, с разными файлами для передачи. Это можно сделать и в блоке контента, как внизу, так и вверху страницы, при желании можно добавить фрейм вывод и в шапку сайта и таким образом создать мини-панель управления всей рекламой из одной папки.

Важно!!! Напоследок хотелось бы дать пару советов. Называйте файлы осмысленными именами, что бы по истечению времени не забывать где что находится. Также важно знать, что если вы используете фреймовые окна в качестве рекламы, то обязательно в коде баннера ставьте атрибут target="_blank" для открытия страницы в новой вкладке. В противном случае рекламируемый ресурс или страница, откроется в окне фрейма.


razdacha.jpg

Просмотров: 2 498
Последние новости блога
Скрипт увеличение изображения, установка на DLE. Часть-1.
Наверняка вы не раз встречали скрипты способствующие увеличивать изображения, при наведении на них курсора. В последнее время, они получили наибольшую популярность, на продающих страницах, интернет
Основы PHP. Метод передачи данных POST.
В php существует два основных метода передачи данных, это GET и POST.  Сегодня речь пойдёт о наиболее распространённом методе передачи данных POST. В качестве примера работы данного метода, мы
Основы PHP. Конструкция IF и ELSE.
Для большего понимания того что будет, описывается в это публикации, необходимо ознакомится с предыдущим статьями по теме: « Основы PHP. Переменные и их значения » и «Основы PHP.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru