Ротатор баннеров и изображений для iWeb

Доброго времени суток, дорогие друзья! Сегодня предлагаю поговорить о том, как создать и разместить ротатор баннеров или любых изображений на сайте, разрабатываемом в редакторе Apple iWeb.

Использовано фото: Ryoichi Tanaka

В интернете под термином «ротация» обычно подразумевают случайный показ контента на страницах интернет ресурса. В нашем случае, этим контентом выступят любые изображения или рекламные баннеры, которые будут случайным образом меняться при каждом обновлении веб-страницы, на которой они размещены. При этом, каждое изображение или баннер, естественно, будет представлять из себя ссылку, кликнув по которой, пользователь сможет перейти по указанному в ней адресу.

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

Чтобы показать, как может выглядеть ротатор, я создал простую «демку», в которой «крутятся» изображения со ссылками на соответствующие разделы сайта apple.ru: при обновлении данной страницы, эти изображения меняются, также меняются и адреса ссылок.

Область применения и пример ротатора

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

Скрипт, на основе которого создан ротатор, очень простой и легко настраиваемый: после минимального редактирования, он (точнее, его код) помещается в html-сниппет редактора Apple iWeb и начинает работать сразу же после публикации веб-страницы.

Кстати, ищется автор этого скрипта: с радостью размещу информацию о нем в данном материале.

Теперь о том, как модифицировать скрипт и разместить ротатор на своем веб-ресурсе.

Для начала, подготавливаем баннеры (изображения), определяемся на какие веб-адреса они должны ссылаться. Размер изображений может быть любым, но желательно, чтобы он был одинаковым по вертикали и горизонтали. По умолчанию, скрипт «оперирует» c пятью изображениями, но, при желании,  их количество легко увеличить. Создаем в корне сайта папку с названием banner и копируем в нее подготовленные файлы.

Копируем в буфер обмена код скрипта из окна, расположенного ниже. Запускаем текстовый редактор (отлично подойдет TextWrangler), создаем текстовый документ и вставляем в него код.

Настройка и размещение скрипта ротатора на страницах сайта

Настало время внести в код необходимые изменения:

1. Вместо https://example.com/ вставляем адреса страниц, на которые должен ссылаться соответствующий баннер;
   

2. Горизонтальные и вертикальные размеры width='300', height='170' баннеров / изображений  меняем на свои (размеры указываются в пикселах). Если необходимо, также изменяем пути к файлам изображений (в представленном коде, изображения имеют названия banner1.gif - banner5.gif и размещаются в папке banner, находящейся в корне сайта).
   

Копируем отредактированный код в буфер обмена. Запускаем редактор Apple iWeb и, в нужное место макета страницы, добавляем html-сниппет, в него вставляем скопированный код. Применяем изменения и публикуем страницу в локальную папку на своем компьютере. Если, на этом этапе работы, возникают какие-либо трудности, освежаем в памяти материалы: Использование iWeb: Применение html-сниппетов и Публикуем сайт на хостинге.

Открываем опубликованную страницу в любом веб-браузере, обновляя страницу, убеждаемся, что скрипт работает и изображения меняются. Если все правильно функционирует, можно «заливать» свой сайт на хостинг: поздравляю - у нас все получилось .

Created by Apple iWeb • Library for Me