Создаем сайт в конструкторе WebSite X5 Evolution

Если вас интересует вопрос, как создать сайт самостоятельно, обратите внимание на конструктор WebSite X5 Evolution. Его главная особенность – независимость от подключения к интернету. То есть это инструмент, обеспечивающий хранение файлов вашего веб-ресурса на локальном компьютере, что дает возможность работать над сайтом в любое удобное время, не «привязываясь» к интернету. Также возможно и редактирование сайта при подключении к интернету: в этом случае вы сможете вносить все необходимые изменения в свой веб-ресурс прямо в браузере.

В этой статье мы рассмотрим, как создать сайт на WebSite X5. В качестве примера создадим веб-ресурс, рекламирующий услуги автосервиса. Для работы будем использовать платную версию WebSite X5 Evolution. При желании создать бесплатно свой сайт, можно для начала воспользоваться бесплатной версией программы, после оценки возможностей которой, вы выберете себе подходящий платный пакет (но об этом позже).

Начало работы по созданию сайта в офлайн конструкторе

После установки конструктора WebSite X5 Evolution на компьютер перед вами появится окно, где можно ознакомиться с продуктами компании-разработчика, а также посмотреть обучающее видео на английском языке, но с русскими субтитрами. Изучив представленную информацию, перейдем к созданию сайта. Для этого следует нажать кнопку «Пуск» в правом верхнем углу рабочей области.

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

Далее нужно будет ввести данные об авторе сайта, его описание, выбрать язык веб-ресурса, и заранее подготовленный значок для него (он же favicon). После этого опять жмем «Далее» и попадаем в раздел выбора шаблонов:

Выбор шаблона и его редактирование

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

Чтобы лучше разобраться с конструктором, выбираем третий вариант, и будем работать «с нуля», создав свой собственный шаблон.

После выбора пункта «Новый шаблон» система применит его к нашему проекту. Для продолжения работы следует нажать кнопку «Далее», что приведет нас в раздел «Стиль шаблона», где будет вестись работа со стилем выбранного шаблона и его элементами.

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

В окне «Стиль шаблона» выберите пункт «Структура шаблона» и конструктор откроет редактор, в котором можно настроить положение и внешний вид основных элементов (полей) сайта (шапки, меню, области контента, подвала и т.д.), именующихся в редакторе «Разделами страницы». Для изменения нужного поля, выберите его в выпадающем меню «Раздел страницы» и произведите необходимые настройки:

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

Изменим шапку сайта, заменив ее на подготовленное заранее изображение. Для этого в выпадающем меню выберите пункт «Шапка (хедер) страницы», и, нажав на соответствующий значок, укажите путь к изображению:

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

подогнав изображение под требуемые размеры. В итоге получаем:

Нажимаем кнопку «ОК» в правом верхнем углу, внесенные изменения сохраняются, и конструктор перенаправляет нас в предыдущий раздел «Стиль шаблона». Для продолжения редактирования шапки сайта (нам же еще нужно добавить в нее название компании, контактные данные и т.д.) нажимаем кнопку «Далее», которая откроет простой графический редактор для изменения шапки и подвала сайта (для выбора нужного элемента используйте соответствующие вкладки):

Выбрав значок

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

Но вот только далеко не все шрифты здесь отображаются корректно (может быть, просто не дружат с кириллицей):

Добавив нужную информацию, нажимаем кнопку «Предпросмотр», и видим, как будет выглядеть наш сайт с новой шапкой:

Теперь поработаем над подвалом. Для этого перейдем во вкладку «Подвал (футер) страницы», и попадем в точно такой же редактор. Здесь можно добавить изображение для данной области, текст и прочие элементы (даже заранее подготовленную анимацию).

Если вы не будете добавлять сюда изображение, а просто захотите изменить цвет подвала, нажмите кнопу «Назад» в правом верхнем углу, выберите иконку «Структура шаблона» и в появившемся окне выберите из выпадающего списка «Подвал (футер) страницы», и настройте для него подходящий цвет. Такой же цвет или иной можно выбрать и для области меню, фона страницы и прочих элементов:

Затем нажмите «ОК», «Далее» и добавьте нужный текст в подвал. После этого в режиме предварительного просмотра можно увидеть следующую картину:

Идем дальше.

Создание сайта на websitex5: работа с разделами, контентом, мультимедиа

Нажав, находясь в редакторе, кнопку «Далее», попадаем в раздел для работы со страницами сайта, который носит название «Создание карты сайта»:

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

• Двигатели;
• Подвеска и ходовая;
• Кузовные работы;
• Электрика;
• Выхлопная система;
• Салон;
• Другие услуги;
• Контакты.

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

Видно, что оформление главного меню неплохо было бы поменять (выбрать другой шрифт, сделать выравнивание по левому краю). Для этого возвращаемся в раздел «Стиль шаблона» и выбираем иконку «Главное меню» (для возврата в этот раздел используйте кнопку «Назад» в правом верхнем углу рабочей области) и попадаем в редактор, где будет вестись работа с меню:

Обратите внимание на вкладки справа. С их помощью можно настроить множество параметров главного меню, вплоть до реакции на наведение курсора.

Если после манипуляций с текстом меню он перестал помещаться в поле, можно увеличить размер данной области. Для этого вернитесь в раздел «Структура шаблона» и, выбрав в выпадающем списке пункт «Меню», установите для него нужную ширину.

Проделав необходимые манипуляции с главным меню, получаем:

Теперь дело за малым – осталось наполнить страницы нашего сайта, созданного в WebSite X5 Evolution контентом. Для этого нажимаем кнопку «Далее», пока не попадем в окно «Создание карты сайта», где мы работали со страницами нашего веб-ресурса (а для более быстрого перехода в этот раздел просто нажмите на цифру «2» в левой части рабочей области редактора сайтов):

Для редактирования нужной страницы просто дважды кликните по ней левой кнопкой мыши, и конструктор откроет визуальный редактор:

Слева здесь представлена область контента, отображаемая на конкретной странице, справа – элементы, которые можно добавить. Область контента в конструкторе сайтов WebSite X5 Evolution представляется в виде таблицы. Вы можете объединить все ее ячейки в одну, или же разбить на более мелкие части, куда будут добавляться нужные элементы при помощи иконок, размещенных в правой части редактора.

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

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

Также текстовый редактор WebSite X5 Evolution «понимает» и HTML-теги, так что, если у вас уже есть готовые тексты, можете их добавлять сюда, предварительно активировав в редакторе соответствующую функцию «Включить HTML-код»:

Добавим контент на нашу главную страницу, и получим:

Главная страница сайта готова. Работа с другими разделами производится аналогичным образом: возвращаетесь в раздел «Создание карты сайта», выбираете нужную страницу, и редактируете ее. Проделаем подобную работу со всеми разделами сайта. При этом в раздел «Контакты» добавим форму обратной связи (при помощи значка «Почтовая программа»).

Теперь сайт готов к публикации. Но прежде вам придется поработать в разделе «Расширенные настройки». Здесь собраны функции, касающиеся некоторых SEO-настроек сайта, формирования блога, настройки ленты RSS и т.д.

При необходимости, используя представленные здесь возможности, вы можете добавить на создающийся сайт следующие элементы:

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

После установки нужных вам функций можно переходить к следующему шагу – публикации сайта, созданного при помощи конструктора WebSite X5 Evolution:

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

Пример созданного нами сайта можно посмотреть здесь.

О платных версиях WebSite X5 Evolution

Если вы решите бесплатно создать сайт на websitex5, можно воспользоваться бесплатной версией программы WebSite X5 Free. Как и у любой тестовой версии ее возможности будут существенно ограничены (вы не сможете полностью отредактировать шаблон и не получите доступ ко многим другим функциям).

Поэтому лучше выбрать один из платных вариантов:

Выбрав, например, версию WebSite X5 Evolution, вы получаете бесплатные услуги хостинга для своего сайта и регистрацию домена второго уровня сроком на один год. Версия Professional ориентирована на экспертов в области создания сайтов.

Она имеет более широкий функционал по сравнению с Evolution, в который, помимо года бесплатного хостинга с удобной панелью управления и использования домена входит масса полезных функций. Например, вам будет доступно приложение Feed Ready (есть в AppStore и Google Play), благодаря которому все ваши пользователи (клиенты) смогут получать важную информацию (об акциях, распродажах и т.д.).

Подробную информацию о платных пакетах WebSite X5 вы найдете в меню: Товары – Сравните версии.

Вывод

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

Также стоит отметить, что этот конструктор отлично подходит для создания любых типов веб-ресурсов: сайтов, блогов, интернет-магазинов и т.д. (или «все в одном»). Неплохие возможности он предлагает и для SEO-оптимизации. Этому способствует автоматическая генерация кода сайта в HTML5 и CSS 2.1/3, автоматическое создание карты сайта, возможность редактировать мета-теги и т.д. Кроме этого в редактор встроена функция анализа вашего сайта, позволяющая выявить степень качества с точки зрения SEO.

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