Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
                   Оригинальная раскачивающаяся вывеска

Приветствую гостей и постоянных посетителей сайта! Сегодня хочу поделиться с вами интересным элементом для сайта - вывеской, которая раскачивается из стороны в сторону, а при наведении на нее курсора начинает раскачиваться еще сильнее. Такую вывеску легко приспособить на сайте под разные цели, так как она отлично привлекает внимание.

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

Установить такой элемент на свой сайт проще простого, даже начинающие с этим легко справятся. Потребуется всего-то подключить библиотеку JQuery, если она у вас еще не подключена да прописать небольшой код в теле сайта.

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

Раскачивающаяся вывеска
А вот сама вывеска в рабочем состоянии, можете курсором покачать ее...
А теперь давайте перейдем непосредственно к процессу установки. Перед установкой загрузите изображение в папку с картинками на вашем сервере и папку js из архива, если у вас на сайте на этот момент еще не подключена библиотека jQuery.

ШАГ 1. Подключение библиотеки jQuery. Если таковая уже установлена на вашем сайте, то подключить ее нужно, прописав такую строку кода в head сайта:

<script src="js/jquery.min.js"></script>

Если путь к папке js, выделенный красным цветом, у вас отличается от моего, то измените его.

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

ШАГ 2. Теперь там же, в head нужно добавить вот такой небольшой код, отвечающий за раскачивание вывески:

<script type="text/javascript">
            $(document).ready(function() {
                  function swing(){
                     $('.logo_tab').toggleClass('right_tab');
                     setTimeout(swing, 1000);
                  }
                  swing();
            });
        </script>

ШАГ 3. Переходим к телу сайта (body) и делаем вывеску ссылкой на любую страницу вашего сайта. Например, у меня ссылка ведет на главную страницу, вы можете указать любую, хоть стороннюю.

Для ссылки прописываем такую строку в коде:

<a class="logo_tab right_tab" href="http://sayt-s-nulya.ru"><img src="images/vyveska.png" alt="Раскачивающаяся вывеска"></a>

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

ШАГ 4. Теперь добавим немного стилей для эффекта более сильного раскачивания при наведении курсора, добавляется в body :

<style type="text/css">
    .container {margin: 0 auto; max-width: 980px; padding: 10px; width: 100%; }
    a.logo_tab {float: none; margin: -125px 0 -20px 50px; }
    a.logo_tab img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); }
    a.logo_tab.right_tab img { -moz-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); -o-transform:rotate(-7deg); -ms-transform:rotate(-7deg); transform:rotate(-7deg); }
    a.logo_tab:hover img { -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
    a.logo_tab.right_tab:hover img { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }
</style>

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

До новых встреч! С ув. Светлана (SvetLana_TSV)





ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!