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

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

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

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

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

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

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

Кто уже проштудировал учебники для начинающих по html и css, могут внести нужные правки в файл стилей, остальным рекомендую действовать по инструкции ниже. Для установки такого билборда вам потребуется всего три шага и десять минут времени. Перед тем, как приступить к установке рекомендую приготовить свои картинки.

Они должны быть одинакового размера 792 Х 335 px и формата jpg. На картинках при желании можно разместить текст, воспользовавшись любым графическим редактором, установленным на вашем компьютере (Paint.net, Photoshop, даже WebPageMaker подойдет для этих целей) либо с помощью онлайн-фотошопа.

Когда картинки готовы, помещаете их в папку images вместо исходных, оставив прежние названия. Если хотите оставить оригинальные названия картинок, то в файле css не забудьте их изменить.


ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!
Полезные программы
Скачать Web Page Maker
Инструкция по WPM
Видеоуроки по WPM
Скачать шаблоны для WPM
Скачать Wordpress rus
Установка CMS WordPress
Установка темы WordPress
Скачать темы для WP
Скачать Joomla 3.0 rus
Установка CMS Joomla
Установка шаблона Joomla
Скачать темы для Joomla
Выбор хостинга
Пятерка лучших хостеров
Регистрация домена
Создание фавикона
Установка счетчика
Создание карты сайта
Юзабилити сайта
Кроссбраузерность
Бесплатные гостевые
Комментарии для сайта
Html-цвета для сайта
Декодер абракадабры





Ну прямо как настоящий, что ж  приступаем к установке билборда.

ШАГ 1. Скачиваем и распаковываем архив.


ШАГ 2. Заходим в корневую директорию сайта с помощью любого FTP-клиента, создаем там папку billboard и в нее перетягиваем из архива обе папки: папку images с подготовленными картинками и папку css со стилями.

Можно, не создавая папки billboard, картинки перетянуть сразу в серверную папку с изображениями сайта, по умолчанию она так и называется images или img. А файл стилей (не саму папку css, а вложенный в нее файл стилей) перетянуть в папку с общими стилями сайта, при этом проследить, чтобы название имеющегося там файла стилей не совпадало с загружаемым. Иначе файл общих стилей сайта будет заменен стилями билборда.

Если файл style.css  на сервере уже существует, то просто переименуйте файл стилей билборда, например, в example.css. При подключении стилей к странице в html-коде не забудьте прописать новое название.

Вариант первый с созданием отдельной папки billbord для новичков предпочтительнее, так как минимизирует количество возможных ошибок. Просто перетянули две папки с компьютера в папку billboard на сервере и порядок! Ничего дополнительно корректировать не придется.


Содержимое архива
Загрузка файлов на сервер
ШАГ 3. Теперь осталось подключить билборд к сайту, для этого нужно вставить html-код в то место на сайте, где хотите  его видеть. Код билборда небольшой, копируем его и вставляем в исходный код сайта между тегами <body> и </body>:

<div id="wrapper">
        <div id="billboard-outer">
            <ol id="billboard">
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
                <li><div></div><div></div><div></div></li>
            </ol>
        </div>
    </div>
</div>

И в завершение подключаем файл стилей, прописав одну короткую строку кода между тегами <head> и </head>:

<link rel="stylesheet" type="text/css" href="billboard/css/style.css"/>

Если вы не создавали отдельную папку billboard на сервере, то в этой строке кода исправьте путь к файлу стилей на свой после href="...

Для тех, кто делает сайт в Пейдже, напоминаю, вставка любого html-кода в тело страницы (между тегами <body> и </body>) производится через меню Вставка → Html  или Script-код.  Как вставлять код в голову страницы (между тегами <head> и </head>), не прибегая к экспорту в html-файл и корректировке в Блокноте, я рассказываю в своем видеокурсе.

На этом установка билборда завершена. Загружаете страницу  с билбордом на сервер и любуетесь результатом:))

Скачать архив с билбордом

Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).


P.S. Подписчики в сегодняшнем выпуске рассылки получат возможность бесплатно скачать большой пак профессиональных иконок (более 1500 шт в 17 категориях) в формате png и четырех размерах. Данная подборка продается на микростоке за 27 баксов и это со скидкой! Исходная цена - 85 долларов, так что не пропустите.

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