Обзоры расширений Joomla

Видео уроки Website X5. Создание сайта с нуляВидео уроки Website X5. Создание сайта с нуля

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 12.

 

 

В предыдущем цикле статей «Обзор Incomedia website x5 v8 Evolution (часть 1, 2, 3, 4, 5)» была рассмотрена лучшая программа для создания сайта (или одна из лучших). В данном цикле мы рассмотрим девятую версию Incomedia Website Х5 Evolution.

Для тех, кто не знаком с программой WebSite X5, нужно сказать, что это многофункциональный визуальный конструктор сайтов. При помощи него можно самостоятельно создать сайт визитку, блог, сайт фирмы и даже интернет магазин. Есть возможность создания многоязычных сайтов. К основным особенностям Incomedia Website Evolution 9 отнесём следующие:

  • Простой и удобный интерфейс.
  • Поддержка создания сайтов на русском языке, русскоязычная справка и интерфейс.
  • Удобный менеджер по работе с несколькими проектами.
  • Расширенные возможности по SEO оптимизации сайта.
  • Большое количество шаблонов оформления.
  • Удобный редактор шаблонов.
  • Продуманный инструмент для создания структуры сайта.
  • Возможность создания RSS ленты.
  • Возможность создания закрытых областей сайта для зарегистрированных пользователей.
  • Удобный FTP клиент.
  • Хорошая техническая поддержка.
  • Постоянные обновления и улучшения программы.
  • Адекватная цена программы.
  • И многое другое.

В обзоре будет участвовать последняя, на момент написания статьи (17.05.2012), стабильная русскоязычная версия Incomedia Website Х5 Evolution 9.0.12.1873. Те инструменты, настройки и функциональные возможности, что были рассмотрены в предыдущем цикле статей «Обзор Incomedia Website X5 9 Free (часть 1, 2, 3)» не будут рассматриваться.

Существует несколько версий Incomedia Website X5. Они отличаются по функциональности. В цикле статей «Обзор Incomedia Website X5 9 Free» рассмотрена бесплатная программа для создания сайта HTML – WebSite X5 9 Free. Это самая ограниченная по функциональности версия. Она подойдёт для создания «домашней странички» и для общего ознакомления с возможностями Incomedia Website X5. Для создания более сложных сайтов рекомендую обратить своё внимание на одну из платных версий программы.

  • Incomedia Website X5 9 Smart.
  • Incomedia Website X5 9 Compact.
  • Incomedia Website X5 9 Evolution.

Отметим, что Incomedia Website X5 9 Evolution не только поддерживает создание сайтов на русском языке, но и обладает полностью русскоязычным интерфейсом и русскоязычной справочной системой.

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

Новое в Incomedia Website X5 Evolution 9

Отметим некоторые нововведения и улучшения в 9-й версии по сравнению с 8-й, которые делают Incomedia Website Evolution 9 ещё более удобной и функциональной по отношению к её предшественнице (8-й версии), и дают возможность называться «лучшая программа для создания сайта».

  • Окно программы теперь можно развернуть на весь экран.
  • Программа теперь обладает более расширенными настройками по сохранению проектов.
  • Упрощённая процедура предварительного просмотра изменений, вносимых в проект во встроенном браузере.
  • Обновлённая галерея шаблонов сайта.
  • Улучшенный графический редактор шаблонов.
  • Усовершенствованный инструмент по созданию структуры сайта.
  • Возможность создания страницы без шаблона.
  • Переработанный и усовершенствованный объект Галерея.
  • Улучшенный инструмент создания блогов.
  • Улучшенные возможности по созданию интернет магазина.
  • Улучшенный инструмент стилей.
  • Добавлена поддержка социальных закладок при помощи сервиса Addthis.com (детальнее о возможностях данного сервиса Вы можете прочитать в статье «Обзор AddThis. Социальные кнопки Joomla»).
  • Улучшенный FTP клиент с поддержкой FTTPS и Gzip сжатием.
  • Поддержка технологий HTML5 и CSS 2.1/3.
  • Встроена библиотека JavaScript jQuery.
  • Генерируемые страницы имеют кодировку UTF8.
  • Интеграция с Google Webmaster Central и Google Analytics.
  • И многое другое.

Стартовая страница Incomedia Website X5 Evolution 9

Стартовая страница Incomedia Website X5 Evolution 9 (рисунок ниже) незначительно отличается от стартовой страницы бесплатной версии программы. За исключением того, что на ней Вам не предлагают купить Evolution версию, а перейти к просмотру видео уроков.

Стартовая страница Incomedia website x5 evolution 9

Настройки (предпочтения) Incomedia Website X5 9 (рисунок ниже) помогут Вам настроить параметры сохранения проекта и просмотра вносимых в него изменений.

Настройки (предпочтения) Incomedia website x5 9

Также Вы сможете выбрать тип скриптов для E-mail формы. Менять данную опцию следует только в том случае, если настройки по умолчанию не работают на Вашем хостинге (если возникли проблемы с отправкой почты или корзиной товаров на сайте).

  1. Стандартный скрипт.
  2. Серверный скрипт низкого качества.
  3. Низкоуровневый скрипт.

Для настройки доступно два вида представления данных для E-mail формы.

  1. Отправить как POST.
  2. Отправить как GET.

Для отправки писем предпочтительней использовать метод POST. Но если у Вас возникли проблемы на хостинге, то попробуйте применить GET метод.

Для ознакомления с другими возможностями по настройке Incomedia Website X5 Evolution 9, ознакомьтесь с данным разделом.

После того, как Вы внесёте необходимые настройки, можно перейти дальше к созданию нового или выбору существующего проекта (рисунок ниже).

Выбор проекта

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

Импорт проекта

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

Мы создадим новый проект «Сайт Aleksius» и будем рассматривать возможности Incomedia Website X5 Evolution 9 на его примере.

Общие настройки

Страница Общие настройки (рисунок ниже) разделена на две вкладки:

  1. Общие.
  2. Дополнительные.

Общие настройки

Вкладка Общие (рисунок выше) детально рассмотрена в этой главе.

Рассмотрим вкладку Дополнительные (рисунок ниже).

Вкладка Дополнительные

  • Введите код для настройки заголовка Вашего Вебсайта. В данном поле Вы можете ввести произвольный HTML код для вставки его на все страницы сайта. Это может понадобиться для более тонкой настройки сайта
  • Мета тег для распознавания в Google Webmaster Central. Если Вы используете сервис Google для веб-мастеров, то в данном поле можно ввести код для подтверждения прав владельца сайта и подключения его к сервису. Рекомендую завести аккаунт в этой системе и подключить к ней сайт.
  • Код для статистики Вебсайта. Позволяет вставить счётчик Google Analytics для получения расширенной статистики по посещениям и использованию Вашего сайта пользователями. Рекомендую завести аккаунт в системе Google Analytics и подключить к нему Ваш сайт.
  • Автоматически создать карту сайта. Позволяет автоматически генерировать карту Вашего сайта. Она поможет представить структуру сайта для пользователя в удобном древовидном виде, а также ускорит индексирование сайта поисковыми системами. Рекомендую использовать данную опцию.
  • Активировать защиту HTML кода. Данная опция заблокирует нажатие правой кнопкой мыши на странице Вашего сайта. Это незначительно затруднит копирование содержимого страницы пользователями.

Выбор шаблона

В Incomedia Website X5 Evolution 9 Вы сможете воспользоваться встроенным шаблоном или создать новый шаблон (рисунок ниже).

Выбор шаблона

Встроенные шаблоны разделены на 16 категорий.

  1. Животные. 9 шаблонов.
  2. Краткий обзор. 15 шаблонов.
  3. Артистичный. 13 шаблонов.
  4. Бизнес. 14 шаблонов.
  5. Цветы. 14 шаблонов.
  6. Еда и рестораны. 7 шаблонов.
  7. Досуг. 13 шаблонов.
  8. Внутренний дизайн. 11 шаблонов.
  9. Природа. 14 шаблонов.
  10. Школа и образование. 12 шаблонов.
  11. Фотоальбом. 9 шаблонов.
  12. Линии и цвета. 14 шаблонов.
  13. Спорт. 13 шаблонов.
  14. Технологии. 9 шаблонов.
  15. Путешествия. 14 шаблонов.
  16. Разное. 7 шаблонов.

У каждого из шаблонов есть 4 стиля. Итого Вам доступно 752 разных шаблона. Плюс у каждого стиля может быть 2 типа меню (горизонтальное и вертикальное). Более того, каждый из стилей может иметь около 40 оттенков цвета. Что в итоге даёт 60160 вариантов оформления сайта (с учётом меню и цветовых оттенков).

Рассмотрим несколько вариантов шаблонов из различных категорий (рисунок ниже).

Примеры шаблонов

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

Создание уникального шаблона

  • Тип меню. Вы можете выбрать вертикальное или горизонтальное меню для шаблона, причём горизонтальное может располагаться над или под верхним колонтитулом (шапкой сайта).
  • Раздел страницы. Содержит список всех областей страницы, которые составляют шаблон сайта. А именно: Фон страницы, Верхний колонтитул, Меню, Содержание страницы, Нижний колонтитул, Фон нижнего колонтитула.

Каждый из этих элементов обладает следующими опциями: Цвет (возможно использование прозрачности), Файл (возможно задать графический файл (JPG, GIF, PNG) для его использования в шаблоне сайта), Повторение, Выравнивание (выравнивание изображения (Сверху-Слева, Сверху, Сверху-Справа, По центру-Слева, По центру, По центру-Справа, Снизу-Слева, Снизу, Снизу справа)). Параметр Повторение даёт возможность дублирования изображения разными способами (Без повторения, Повторение по горизонтали, Повторение по вертикали, Черепичное изображение, По ширине окна). Например, в тестовом сайте фон страницы задан одним изображением 50х768 пикселей (рисунок ниже). Но в опции Повторение задан параметр Повторение по горизонтали. Это даёт несколько преимуществ: фон будет смотреться одинаково на экранах с разрешением 1024х768 и на экранах с разрешением 1920х1080, изображение не обрезается и не теряет своих пропорций, фон страницы всегда отображается на всё окно браузера, файл рисунка занимает по объёму (в Кб) несравнимо меньший размер, чем например файл с расширением 1920х1080.

Фон

Помимо общих настроек разные разделы страниц имеют свои собственные настройки.

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

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

Меню. Можно задать его высоту (ширина зависит от ширины верхнего колонтитула) и внутренние границы (отступы в пикселях. Заголовок, Нижняя часть страницы, Слева, Справа)

Содержание страницы. Можно задать внутренние границы (отступы в пикселях. Заголовок, Нижняя часть страницы, Слева, Справа).

Нижний колонтитул. Можно задать его высоту.

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

Программа для создания сайта HTML Incomedia Website X5 Evolution 9 позволяет отредактировать верхний и нижний колонтитул шаблона сайта. Давайте рассмотрим эти возможности более детально.

Редактирование графического шаблона

Редактор графических шаблонов (рисунок ниже) разделён на две вкладки «Верхний колонтитул» и «Нижний колонтитул».

Редактор графических шаблонов

Некоторые из инструментов редактора шаблонов были рассмотрены в статье «Обзор Incomedia WebSite X5 9 Free (часть 1). Бесплатный конструктор сайтов». Но в Incomedia Website X5 Evolution 9 их гораздо больше.

  • Сделать ссылку на этот объект. Позволяет назначить определённое действие при нажатии на объект (детальнее будет рассмотрено ниже). В примере Вы можете нажать на логотип сайта и перейти на стартовую страницу сайта Aleksius.com.
  • Вставить Flashанимацию. Позволяет вставить файл формата SWF.
  • Вставить Слайдшоу. Позволяет вставить объект Слайдшоу в колонтитул.

Давайте рассмотрим объект Слайдшоу (рисунок ниже) более детально.

Слайдшоу

Вы можете добавить файлы следующих графических форматов в качестве изображений слайд шоу: JPG, GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF. Можно выставить порядок их показа (или указать случайный порядок), задать опцию автовоспроизведения, задать анимационный эффект смены изображения, эффект для самих изображений (Размытие, Наклон и так далее) и даже назначить действие по нажатию на каждый рисунок (например, переход на определённую страницу).

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

Настройка эффектов анимации смены изображений

На вкладке Увеличение и положение (рисунок ниже) Вы можете немного отредактировать анимированные объекты, задав необходимые настройки увеличения (до 400%) и позиционирования (по координатам X и Y).

Вкладка Увеличение и положение

Вкладка Страница позволит Вам указать для каждой картинки отдельно, на какой странице сайта она должна отображаться, а на какой нет.

  • Вставить HTML код. Позволяет вставить произвольный HTML код. В примере, в нижнем колонтитуле Вы можете видеть надпись «Копируя материалы, делайте ссылку на сайт Aleksius.com. Соблюдайте правила поведения на сайте.». При нажатии на слова «правила поведения на сайте» Вы перейдёте на страницу с правилами поведения на сайте Aleksius.com. Это сделано как раз при помощи вставки HTML кода.

<p style="text-align: center;">Копируя материалы, делайте ссылку на сайт Aleksius.com<br />

Соблюдайте <a href="http://aleksius.com/about-site/behaviour-rules-on-a-site">правила поведения на сайте</a>.</p>

  • Вставить поле Поиск. Позволяет вставить форму поиска по сайту. Пример такой формы Вы можете видеть на тестовом сайте в нижнем колонтитуле. Ниже показаны настройки поля. Можно сменить подпись кнопки Поиск, задать различное начертание, гарнитуру и размер шрифта и заменить цвет для текста кнопки, текста поля, фона кнопки и поля. Его работу Вы сможете проверить только после переноса сайта на хостинг.

Настройка поиска

Давайте рассмотрим, какие в Incomedia WebsiteX5 Evolution 9 доступны эффекты для изображений, которые ещё не были рассмотрены в статье «Обзор Incomedia WebSite X5 9 Free (часть 1). Бесплатный конструктор сайтов».

  • Скос. Доступны опции Глубина, Диффузия, Угол.
  • Непрозрачность. Доступна опция степени непрозрачности.
  • Размывание. Доступна опция Диффузия.
  • Волна. Доступны опции Диффузия, Частота.
  • Перспектива. Доступны опции изменения перспективы по горизонтали и вертикали.
  • Наклон. Доступны опции изменения наклона по горизонтали и вертикали.

Вкладка Нижний колонтитул (рисунок ниже) содержит все те же инструменты, что и вкладка Верхний колонтитул.

Вкладка Нижний колонтитул

В статье «Обзор Incomedia WebSite X5 9 Free (часть 2). Бесплатная программа для создания сайта» были рассмотрены различные действия, доступные для назначения по нажатию на объект. В этой статье Выше мы упомянули инструмент Сделать ссылку на этот объект. Давайте рассмотрим более детально те действия, которые доступны в Incomedia Website X5 Evolution 9 и не были освещены в обзоре Incomedia Website X5 Free 9.

  • Файл или URL с ShowBox. Вы можете задать открытие файла или другого сайта во всплывающем окне. При этом Вам будут доступны опции ширины и высоты всплывающего окна и поля для заголовка окна (рисунок ниже). Реализацию данного действия можно наблюдать на тестовом сайте.

Файл или URL с ShowBox

  • Галерея ShowBox. При помощи данного действия Вы сможете открыть всплывающее окно, в котором можно будет просмотреть несколько изображений. Вы можете изменить порядок их следования и задать максимальную ширину и высоту окна (рисунок ниже). Реализацию данного действия можно наблюдать на тестовом сайте.

Галерея ShowBox

 

  • Звук. Вы можете прикрепить звуковой файл в качестве действия по нажатию на объект. Доступны следующие форматы: MOV, MP3, WMA, WAV, MID, AIF, M4A.
  • Лента RSS. Можно задать показ (подписку) RSS ленты сайта. Как её настроить будет рассмотрено в следующих частях обзора Incomedia Website X5 Evolution 9.
  • Блог. Данное действие (рисунок ниже) позволит Вам отобразить блог вебсайта (в новом или в том же окне).

Блог

  • Карта сайта. Открывает страницу с картой сайта. Реализацию данного действия можно наблюдать на тестовом сайте.
  • Просмотри корзины. Отображает содержимое корзины покупателя. Как настроить корзину, будет рассмотрено в следующих частях обзора Incomedia Website X5 Evolution 9.
  • Добавить в корзину. При помощи данного действия можно задать добавление товара в корзину по нажатию на определённый объект на сайте. Вы сможете выбрать в качестве действия показ списка продуктов выбранной категории или добавление продукта прямо в корзину (также возможно задать количество добавляемых единиц товара) (рисунок ниже). Детальнее о средствах электронной коммерции, доступных в Incomedia Website X5 Evolution 9, будет рассказано в следующих статьях.

Добавить в корзину

На мой взгляд, Incomedia Website Evolution 9 - лучшая программа для создания сайта не только потому, что она обладает достаточно большими функциональными возможностями, а ещё и потому, что весь её интерфейс похож на «цех» по производству сайтов. Он разделён на 5 частей:

  1. Общие настройки.
  2. Создание карты сайта.
  3. Создание страниц.
  4. Продвинутые настройки.
  5. Экспорт.

По завершении всех пяти этапов у Вас может получиться сайт профессионального уровня без привлечения дорогостоящих специалистов. Благодаря такому подходу, программа для создания сайта HTML (статического сайта) упрощает процесс проектирования веб-ресурса.

В этой статье мы рассмотрели первый шаг создания сайта – Общие настройки. Следующий шаг – Создание карты сайта. В ходе его рассмотрения, в статье «Обзор Incomedia Website Х5 Evolution 9 (часть 2). Программа для создания сайта», будет создана структура будущего проекта.

 

Видео уроки Website X5. Создание сайта с нуляВидео уроки Website X5. Создание сайта с нуля

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 12.

 

Полезные ссылки: