Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
create_webpage [2017/07/14 11:16]
create_webpage [2017/07/14 11:16]
annasemukhina ↷ Имя страницы создание_одностраничника изменено на create_webpage
Строка 1: Строка 1:
 +=====Как создать одностраничник своими руками?​=====
 +Для того чтобы создать одностраничник своими руками,​ в сервисе АвтоВебОфис предусмотрен специальный генератор. Он очень прост в использовании. По своей сути — это конструктор одностраничников. Для работы в нем не нужно иметь глубоких знаний в программировании,​ верстке и дизайне. Большинство действий осуществляется в визуальном режиме.
 +
 +Однако для того чтобы сделать использование генератора одностраничников еще более наглядным и практичным,​ был разработан специальный курс, состоящий из серии уроков в видео формате. В нем на конкретных примерах показан алгоритм работы с данным модулем,​ а также рассмотрены некоторые базовые технические моменты,​ связанные с подготовкой и вставкой кодов видео, скриптов и работой с самыми распространенными html-тегами.
 +
 +Благодаря такому пособию можно создать одностраничник за 1 вечер. Для того чтобы в этом убедиться,​ посмотрите первые 10 видео уроков,​ в которых рассмотрен конкретный пример создания полнофункционального одностраничного сайта.
 +
 +====Видеоуроки:​====
 +**Как создать одностраничник своими руками - Вступление:​** [[https://​www.youtube.com/​watch?​v=Nn1CTztgX4c|{{ odn-vstuplenie.png }}]] \\
 +**Как создать одностраничник - Обзор интерфейса:​** [[https://​www.youtube.com/​watch?​v=Yf7elQa4UHk|{{ odn-interface.png }}]] \\
 +**Как создать одностраничник - Подготовка шаблона:​** [[https://​www.youtube.com/​watch?​v=ZdXmsHVxbn8|{{ odn-podg-shabl.png }}]] \\
 +**Как создать одностраничник - Вставка картинок,​ логотипов,​ текста,​ ссылок и горизонтальных полос:​** [[https://​www.youtube.com/​watch?​v=l1MTb5Fv2wE|{{ odn-vstav-img.png }}]] \\
 +**Как создать одностраничник - Вставка и редактирование текста:​** [[https://​www.youtube.com/​watch?​v=dsLmel1d9ZA|{{ odn-vstav-txt.png }}]] \\
 +**Как создать одностраничник - Вставка и центрирование видео с YouTube:** [[https://​www.youtube.com/​watch?​v=nUZqyM8wO3o|{{ odn-vstav-vid.png }}]] \\
 +**Как создать одностраничник - Вставка текста,​ фон и рамка блока, высота блока, отступы в блоке:​** [[https://​www.youtube.com/​watch?​v=enXfh08-jGw|{{ odn-txt-form.png }}]] \\
 +**Как создать одностраничник - Вставка комментариев социальных сетей ВКонтакте,​ HyperComments и т.д.:** [[https://​www.youtube.com/​watch?​v=pykivFmI1No|{{ odn-socnet.png }}]] \\
 +**Как создать одностраничник - Заливка блока цветом на всю ширину страницы,​ изменение цвета текста:​** [[https://​www.youtube.com/​watch?​v=ulWYx4Hk-lk|{{ odn-color.png }}]] \\
 +**Как создать одностраничник - Заголовок (title), описание (description) и ключевые слова (keywords) для одностраничника:​** [[https://​www.youtube.com/​watch?​v=9NcCoDIY_4M|{{ odn-title.png }}]] \\
 +
 +====Дополнительные материалы:​====
 +  * Получение html-кода виджета комментариев ВКонтакте:​ [[https://​www.youtube.com/​watch?​v=ajwpdZ7VsLI|YouTube]].
 +  * Как загрузить картинку с Яндекс.Диск в одностраничник:​ [[https://​www.youtube.com/​watch?​v=kbgX2JDkEQg|YouTube]].
 +  * Как вставить форму подписки на рассылку в одностраничник:​ [[https://​www.youtube.com/​watch?​v=FpYRJe81X8w|YouTube]].
 +  * Как разместить кнопку заказа товара или услуги на одностраничнике:​ [[https://​www.youtube.com/​watch?​v=82IA8VVwGAk|YouTube]].
 +  * Как вставить кнопки социальных сетей (ВКонтакте,​ FaceBook, Одноклассники и т.д.) в одностраничник:​ [[https://​www.youtube.com/​watch?​v=pnL3wy7-KSE|YouTube]].
 +
 +Видео курс «Одностраничник своими руками» будет постоянно дополняться новыми уроками. Кроме того, количество опций в настройках конструктора одностраничников может отличаться от тех, что были продемонстрированы в видео уроках,​ так как этот модуль платформы АвтоВебОфис постоянно развивается в сторону расширения его функциональности.
 +
 +Однако базовые моменты,​ связанные с созданием одностраничного сайта, остаются неизменными.
 +
 +====Базовые принципы работы конструктора одностраничников.====
 +
 +Генератор одностраничников АвтоВебОфис основан на блочном принципе построения лендинга (landing page). В связи с этим, важно знать, что логика его работы связана с последовательным добавлением двух видов блоков.
 +
 +— Смысловые. Это площадки для позиционирования информации в конкретной части страницы.
 +
 +— Контентные. Это блоки для непосредственного размещения самой информации и находятся они внутри смысловых блоков.
 +
 +Каждый блок имеет свою панель управления,​ которая высвечивается при наведении курсора на соответствующий блок.
 +
 +Алгоритм работы конструктора одностраничников предполагает выполнение 5 простых шагов.
 +
 +  - Выбрать базовый шаблон из списка доступных для использования,​ с которого начнется создание одностраничного сайта. \\
 +  - Ввести название лендинга и сохранить. \\
 +  - Выставить основные «Настройки страницы»,​ в том числе заголовок,​ описание и ключевые слова для оптимизации под поисковые системы (SEO). \\
 +  - Создать смысловые блоки (кнопка «Добавить блок») и, если это необходимо,​ удаление лишних смысловых блоков из выбранного шаблона ​ одностраничника. \\
 +  - В смысловых блоках разместить контентные блоки (кнопка «+» внутри смыслового блока). \\
 +
 +Пожалуй,​ это все, что нужно знать для того чтобы создать сайт одностраничник,​ используя соответствующий генератор платформы АвтоВебОфис. Все остальные тонкости и конкретные технические нюансы представлены (и будут регулярно дополняться) в видео курсе «Одностраничник своими руками».
 +
 +Смотрим уроки и с удовольствием создаем одностраничник за 1 вечер! \\ \\
 +
 +Если у Вас еще остались какие-либо вопросы,​ пожалуйста,​ обращайтесь в нашу Службу поддержки через кнопку [[https://​autoweboffice.com/​support/​open.php|Обратиться в поддержку]],​ по email <​zakaz@autoweboffice.com>​ или в окне консультанта на сайте http://​autoweboffice.com
 +
 +\\  //​Успехов Вам и до новых встреч!//​ \\  //​Служба заботы о клиентах сервиса АвтоВебОфис//​