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

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

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

 

 

В предыдущих обзорах Incomedia WebSite X5 Evolution (часть 1, 2, 3) я рассмотрел возможности, которые требуют более расширенных настроек. Например, закрытая страница сайта и список продуктов. В этой части стати мы подойдём к финальному рассмотрению расширенных настроек (рисунок ниже) Incomedia WebSite Evolution для создания сайта на локальном компьютере. К таким настройкам относятся:

  • Главное меню.
  • Спадающее меню.
  • Подменю.
  • Стили.
  • Страница приветствия.
  • «Рекламный» продаж.
  • Блог.
  • RSS лента.
  • Закрытая область.
  • Корзина покупок.

Расширенные настройки

Главное меню

Созданное меню, рассмотренное в первой части обзора Incomedia WebSite X5 v8 Evolution, выглядит достаточно «примитивно» (рисунок ниже) и не вписывается в общую дизайнерскую концепцию. Если у Вас с ним те же «проблемы», то расширенные настройки меню помогут Вам их решить.

Меню сайта

Как видно из рисунка ниже, расширенные настройки меню разделены на четыре вкладки:

  1. Основная.
  2. Текст.
  3. Графика.
  4. 3D стили. Данная вкладка доступна только при условии активации опции Создание кнопок в качестве изображения, находящейся на вкладке Основная.

Вкладка Основная

Основная. Вкладка Основная (рисунок выше) содержит следующие опции:

  • Создание кнопок в качестве изображения. Позволит Вам сделать кнопки не в виде текста, а в виде картинки. Это откроет дополнительные возможности по их настройке (вкладка 3D стили).
  • Ширина границ. Позволит задать ширину границ для меню.
  • Цвет границы.
  • Ширина. Ширина меню. Если Вы зададите ширину меню больше, чем ширина сайта, то оно будет отображаться не полностью.
  • Внешний отступ. Задаёт отступ в пикселях по высоте.
  • Внутренний отступ. Отступ между пунктами меню.

Текст. На этой вкладке (рисунок ниже) расположены настройки шрифта меню. Можно также указывать выравнивание и горизонтальный отступ в пикселях.

Вкладка Текст

Графика. Вкладка (рисунок ниже) содержит настройки для области меню. А именно:

  • Цвет фона.
  • Цвет фона по наведению мыши.
  • Цвет текста.
  • Цвет текста по наведению мыши.
  • Фоновое изображение.
  • Фоновое изображение по наведению мыши.

Вкладка Графика

Результат применения настроек меню показан на рисунке ниже.

Пример настроенного меню

3D стили. В данной вкладке (рисунок ниже) собраны настройки, отвечающие за отображение меню в виде изображения.

Вкладка 3D стили

Среди настроек:

  • Форма. Задаёт форму изображения пункта меню. Доступно 26 форм.
  • Эффект. Доступно 9 эффектов.
  • Стиль границы. Задаёт стиль обводки изображения. Доступно 4 стиля.
  • Ширина границы.
  • Освещение. Позволяет задать эффект падающего света на изображение под определённым углом. Доступно 9 позиций.
  • Сглаживание углов.
  • Контраст.
  • Прозрачность изображения.

Результат применения настроек меню показан на рисунке ниже.

Результат применения настроек меню

Спадающее меню

Спадающее меню (рисунок ниже) позволит Вам настроить меню второго уровня. Так же как и Главное меню настройки спадающего меню разделены на четыре вкладки.

  1. Основная.
  2. Текст.
  3. Графика.
  4. 3D стили. Данная вкладка доступна только при условии активации опции Создание кнопок в качестве изображения, находящаяся на вкладке Основная.

Спадающее меню

Основная. Вкладка Основная (рисунок выше) содержит следующие опции:

  • Создание кнопок в качестве изображения. Позволит Вам сделать кнопки не в виде текста, а в виде картинки. Это откроет дополнительные возможности по их настройке (вкладка 3D стили).
  • Ширина границ. Позволит задать ширину границ для меню.
  • Цвет границы.
  • Ширина. Ширина меню второго уровня.
  • Прозрачность.
  • Высота. Высота одного пункта меню.

Текст. На этой вкладке (рисунок ниже) расположены настройки шрифта меню второго уровня. Можно также указывать выравнивание и горизонтальный отступ в пикселях.

Вкладка текст

Графика. Вкладка (рисунок ниже) содержит настройки для области меню второго уровня. А именно:

  • Цвет фона.
  • Цвет фона по наведению мыши.
  • Цвет текста.
  • Цвет текста по наведению мыши.
  • Фоновое изображение.
  • Фоновое изображение по наведению мыши.

Вкладка Графика

Результат применения настроек меню показан на рисунке ниже.

Результат применения настроек меню

3D стили. В данной вкладке (рисунок ниже) собраны настройки, отвечающие за отображение меню второго уровня в виде изображения.

Вкладка 3D стили

Среди настроек:

  • Форма. Задаёт форму изображения пункта меню. Доступно 26 форм.
  • Эффект. Доступно 9 эффектов.
  • Стиль границы. Задаёт стиль обводки изображения. Доступно 4 стиля.
  • Ширина границы.
  • Освещение. Позволяет задать эффект падающего света на изображение под определённым углом. Доступно 9 позиций.
  • Сглаживание углов.
  • Контраст.
  • Прозрачность изображения.

Результат применения настроек меню показан на рисунке ниже.

Результат применения настроек меню

Как видно, эта программа для легкого создания сайтов обладает достаточно большими возможностями по настройке меню. Что позволит Вам максимально точно вписать его в общий дизайн всего сайта.

Подменю

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

Подменю

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

Фрагмент карты сайта

Опции доступные для расширенной настройки подменю:

  • Позиция меню. Слева, справа.
  • Ширина.
  • Показывать подменю для меню второго уровня. Отобразит подменю на подобие спадающего меню рассмотренного ниже.
  • Настройки стиля для текущего уровня меню.
    • Цвет фона.
    • Цвет фона по наведению мыши.
    • Цвет текста.
    • Цвет текста по наведению мыши.
    • Фоновое изображение.
    • Фоновое изображение по наведению мыши.
    • Ширина линий.
    • Левое поле.
    • Настройки шрифтов. Шрифт, начертание, размер, набор символов.
    • Фоновое изображение.
  • Настройки стиля для следующего уровня меню.
    • Цвет фона.
    • Цвет фона по наведению мыши.
    • Цвет текста.
    • Цвет текста по наведению мыши.
    • Фоновое изображение.
    • Фоновое изображение по наведению мыши.
    • Ширина линий.
    • Левое поле.
    • Настройки шрифтов. Шрифт, начертание, размер, набор символов.
    • Фоновое изображение.

Результат применения настроек подменю показан на рисунке ниже.

Результат применения настроек подменю

Стили

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

  1. Основная.
  2. Стили ссылок.
  3. Полоса прокрутки.

Стили

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

  • цвет фона.
  • Цвет шрифта.
  • Шрифт. Гарнитура, начертание, кегль, набор символов (кодировка).
  • Выравнивание.
  • Ширина и\или цвет границы над и под элементом.

Эти настройки одинаковые для всех стилей кроме стиля абзаца. Для него нет возможности выравнивание, ширину и цвет границ над и\или под элементом.

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

Вкладка Стили ссылок

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

Вкладка Полоса прокрутки

Страница приветствия

В расширенных настройках Страница приветствия (рисунок ниже) Вы можете «создать» страницу (изображение (JPG, GIF, PNG) или анимация (SWF)), которая будет отображаться при загрузке сайта и через установленный промежуток времени исчезать, переходя на другую страницу.

Страница приветствия

Это может быть изображение с логотипом и слоганом или же Вы можете создать страницу приветствия с выбором языка сайта (до 4-х языков). Давайте рассмотрим опции доступные для редактирования (рисунок выше).

  • Использовать страницу приветствия.
  • Цвет фона страницы.
  • Перейти на домашнюю страницу после (секунд). Указывается временной интервал в секундах, после которого страница приветствия автоматически сменится на домашнюю. К сожалению это не всегда может возыметь положительный эффект. Если у пользователя в браузере включена блокировка автоматических переходов, то это добавит лишние неудобства.
  • Изображение или анимация. Выбираете путь к файлу изображения (JPG, GIF, PNG) или анимации (SWF).
  • Ширина. Ширина страницы приветствия.
  • Высота. Высота страницы приветствия.
  • Звук для страницы. Можно задать фоновый звук страницы. Будьте предельно осторожны при задании этого параметра. Особенно, если Вы выбрали в качестве страницы приветствия Flash анимацию или изображение высоко качества. Помните, что первая страница сайта должна грузиться максимально быстро!
  • Повторять звук. Указывает циклическое воспроизведение звукового файла.
  • Язык 1. Можно указать изображение (JPG, GIF, PNG) для первого языка.
  • Язык 2. Можно указать изображение (JPG, GIF, PNG) для второго языка.
  • Язык 3. Можно указать изображение (JPG, GIF, PNG) для третьего языка.
  • Язык 4. Можно указать изображение (JPG, GIF, PNG) для четвёртого языка.

Рекламный уголок

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

  • Тип. Указываете один из пятнадцати доступных в Incomedia WebSite X5 Evolution анимационных картинок (SWF).
  • Изображение или анимация. Указывается изображение (JPG, GIF, PNG) или анимация (SWF), которая будет показываться при наведении на «рекламный уголок».
  • Звук для страницы. Фоновый звук страницы
  • Ссылка на страницу при нажатии. Можно выбрать любую страницу своего сайта, на которую пользователь будет переходить при нажатии на изображение «рекламного уголка».
  • Ширина и высота. Задаётся ширина и высота изображения.
  • Показывать только на домашней странице. Данная опция служит для вывода «рекламного уголка» только на домашней странице сайта.
  • Показывать на всех страницах. Данная опция служит для вывода «рекламного уголка» на всех страницах сайта.

Рекламный уголок

Блог

Что бы сделать Ваш сайт более функциональным в Incomedia WebSite X5 v8 Evolution предусмотрено создание блога. Для создания блога Вам необходимо перейти расширенные настройки сайта Блог (рисунок ниже).

Блог

Расширенные настройки Блог разделены на три вкладки.

  1. Основная.
  2. Графика.
  3. Комментарии.

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

Вкладка Основная

Как видно, для удобства, настройки разделены на две вкладки (Базовые, Экспертные). В базовых настройках Вы задаёте название статьи, имя автора, дату публикации, категория, описание, краткое описание. Вкладка Экспертные содержит настройки, которые позволят Вам присоединить видео (AVI, WMV, MPG, MOV, QT, RM) или аудио (WAV, MP3, WMA, MID, AIF, AU, RA) файл к записи в блоге, вставить HTML код для гостевой книги, включить комментирование статей.

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

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

Вкладка Графика

На рисунке ниже я приведу несколько шаблонов оформления блога доступных в Incomedia WebSite X5 v8 Evolution.

Шаблоны оформления блога

Вкладка Комментарии (рисунок ниже) содержит следующие настройки:

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

Вкладка Комментарии

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

Пример блога

RSS лента

В предыдущей статье «Обзор Incomedia WebSite X5 v8 Evolution (часть 3). Программа для создания интернет сайта» я рассмотрел действие RSS лента. А сейчас рассмотрим какие есть опции для него. Специально для этого в Incomedia WebSite Evolution есть расширенные настройки с одноимённым названием RSS лента (рисунок ниже).

RSS лента

Как видно из рисунка выше, Вы можете создать одну или более лент новостей, дать ей название, описание и присвоить изображение. При создании RSS ленты (рисунок ниже) Вы указываете название, дату создания, описание и присваиваете ссылку на страницу Вашего сайта.

Создание RSS ленты

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

Закрытая область

В предыдущей статье «Обзор Incomedia WebSite X5 v8 Evolution (часть 2). Программы для создания web-сайтов» я рассмотрел как пометить ту или иную страницу сайта как закрытую, доступную только при вводе пароля. А теперь давайте рассмотрим какими возможностями обладает Incomedia WebSite X5 Evolution для создания закрытых областей. Расширенные настройки Закрытая область (рисунок ниже) позволяют создать несколько разных областей, задать графические настройки формы входа (шрифт (начертание, гарнитура, кегль, набор символов), цвет шрифта, цвет фона поля ввода, фоновый цвет кнопки) и учётные данные для администратора (логин и пароль).

Закрытая область

На рисунке ниже приведён пример создания закрытой области.

Пример создания закрытой области

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

Корзина покупок

В предыдущей статье «Обзор Incomedia WebSite X5 v8 Evolution (часть 3). Программа для создания интернет сайта» я рассмотрел возможность Incomedia WebSite Evolution выводить на страницу товары для их продажи на сайте. А сейчас рассмотрю, как создавать эти товары. Для этого существует расширенная настройка Корзина покупок (рисунок ниже).

Корзина покупок

Все настройки разделены на четыре группы.

  1. Продукты.
  2. Оплата.
  3. Информация о клиенте.
  4. Основная.

Для непосредственного создания «карточки» продукта служит вкладка Продукты (рисунок выше). Здесь возможно создать, удалить, импортировать (TXT, CSV) и редактировать продукты. В окне создания товара (рисунок ниже) Вы задаёте категорию товара, добавляете товар\товары и сортируете их в нужном порядке.

Окно создания товара

Окно создания товара (рисунок ниже) разделено на две вкладки. Основная и Опции. На вкладке Основная можно задать имя товара (и\или код), описание, изображение и цену.

Создание товара

Вкладка Опции (рисунок ниже) позволит Вам добавлять, переименовывать и удалять «характеристики» товара, а также сортировать их в необходимом порядке.

Вкладка Опции

Вкладка Оплата (рисунок ниже) содержит опции, относящиеся оплате.

Вкладка Оплата

Вы можете добавить различные способы оплаты, установить для них «процент» и описание для большего удобства пользователя. Incomedia WebSite Evolution очень хорошо интегрируется с такой системой оплаты как PayPal. Необходимо всего лишь указать номер Вашего PayPal аккаунта, страницу подтверждения и страницу ошибки. После чего посетители Вашего сайта смогут оплачивать товары на сайте при помощи PayPal. Если Вы хотите добавить ещё несколько платёжных систем, то это также можно сделать при помощи вставки произвольного HTML кода в соответствующее поле. Оно появится после того, как вы смените переключатель с Платежи PayPal на Другие платёжные системы.

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

Вкладка Информация о клиенте

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

На вкладке Основная (рисунок ниже) можно настроить отображение корзины, валюту и графические параметры для списка товаров.

Вкладка Основная

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

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

Программа для создания веб-сайтов Incomedia WebSite Evolution помимо удобным интерфейсом обладает умеренной стоимостью, соизмеримой со стоимостью заказа разработки сайта визитки.

В следующей, последней части обзора Incomedia WebSite Evolution я рассмотрю опции экспорта сайта. А именно, какими возможностями обладает Incomedia WebSite X5 Evolution при переносе сайта на хостинг, экспорт на CD\DVD или USB и перенос проекта для редактирования на другом компьютере.

Можно сказать, что Incomedia WebSite Evolution - это программа для легкого создания сайтов с не высокой стоимостью лицензии.

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

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

 

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

При скачивании файлов менеджерами загрузок возможны проблемы.
ФайлОписаниеРазмер
Скачать этот файл (primer.zip)Пример CSV-файла 0.2 Кб