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

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

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

 

 

В предыдущей статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб сайтов» мы продолжили рассмотрение объектов, которые предоставляет конструктор сайтов HTML. В этой статье мы завершим их рассмотрение.

Объекты

Карта

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» мы уже познакомились с новым, для десятой версии программы, объектом Карта (рисунок ниже). Рассмотрим новые опции. Также предлагаю Вам ознакомиться с видео уроком, в котором есть пример использования данного объекта.

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

Создание интернет сайтов для организаций, как правило, требует указания адреса организации, и хорошим тоном станет отображение этого адреса на карте. В отличие от Free версии в Website Evolution доступно три вида «экранов» карты (опция Экран).

  1. Карта.
  2. Street View.
  3. Street View и Карта.

Режим Карта (рисунок выше) позволяет отображать «обычную» схематическую карту.

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

Конструктор сайтов HTML

Конструктор сайтов HTML позволяет совместить в одной области просмотра два типа просмотра – Street View и Карта (рисунок ниже).

Incomedia WebSite X5 Evolution 10

Как видите, Incomedia WebSite X5 Evolution 10 обладает  более расширенными настройками объекта Карта, чем Free версия.

Flash-анимация

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» была рассмотрена вкладка Основной объекта Flash-анимация (рисунок ниже).

Website Evolution

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

Website X5 Evolution

Website X5 Evolution позволяет «связывать» файлы, необходимые для корректной работы flash, непосредственно, самой страницей сайта. В некоторых случаях это позволит улучшить внешний вид страницы и сохранить логику работы flash файла. Для этого Вам достаточно нажать на кнопку Добавить (рисунок ниже) и в поле Связанные файлы для загрузки на сервер указать те файлы, которые необходимо загрузить на сервер для нормальной работы flash. В поле Относительный путь к серверу Вам необходимо указать имя директории, в которую следует загружать выбранные файлы. Опция Связать файл со страницей (только для .js и .css) позволит Вам поместить код файлов JS и CSS вашего flash объекта, если такие есть, в тело страницы сайта в секцию HEAD.

Website X5

Website X5 позволяет задать папку на сервере, в которую, по умолчанию, будут загружаться все файлы SWF (опция Путь для выгрузки Flash-файла).

Список продуктов

Создание интернет сайтов коммерческого характера может предполагать продажу каких-то товаров непосредственно на сайте. В статье «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов» мы уже затрагивали средства электронной коммерции, которые предоставляет конструктор сайтов HTML. Как создавать товары, а также другие настройки инструментов интернет магазина на Incomedia WebSite X5 Evolution 10 мы рассмотрим в статье «Обзор WebSite Evolution 10 (часть 9). Создание сайта своими руками». Объект Список продуктов (рисунок ниже) позволяет размещать на странице сайта уже созданные товары для того, чтобы посетители сайта могли их рассмотреть и купить. Предлагаю Вам ознакомиться с видео уроком, в котором показано как работать с данным объектом.

Incomedia

Incomedia предусмотрела возможность сортировки товаров в нужном Вам порядке. Доступны следующие направления сортировки:

  • Свои настройки. Можно выставить товары в той последовательности, которая Вам нужна. При помощи кнопок Вверх и Вниз.
  • Имя. Сортировка по имени товара.
  • Категория. Сортировка по имени категории товара.
  • Цена. Сортировка по стоимости товара.

Все направления кроме Свои настройки могут быть отсортированы по возрастанию или убыванию.

Incomedia Website

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

Режим отображения. Доступно пять режимов отображения товаров:

  1. Только текст.
  2. Изображение и текст.
  3. Текст и изображение.
  4. Только картинки.
  5. Чередовать картинки и текст.

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

Incomedia Website X5

Incomedia Website X5 позволяет задать количество товаров в одной строке на странице сайта (опция Количество кадров в строке).

Высота кадра. Высота области «карточки» товара в пикселях.

Ширина изображения (%). Ширина изображения товара в процентах от общей ширины области объекта Список продуктов.

Внутреннее поле. Отступ в пикселях от содержимого «карточки» товара до границы области объекта Список продуктов.

Цвет текста. Цвет шрифта описания товара.

Цвет фона. Цвет фона карточки товара. Возможна прозрачность.

Шрифт. Данные опции позволяют задать кегль, гарнитуру и начертание шрифта описания товара.

Толщина рамки. Толщина обводки «карточки» товара в пикселях. Можно задать разное значение для разных сторон.

Цвет. Цвет обводки «карточки» товара в пикселях. Возможна прозрачность. Можно задать разное значение для разных сторон.

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

Тень. Вы можете задать тень для «карточки» товара. Доступны опции: Цвет, Смещение по X, Смещение по Y, Диффузия, Размер.

Из спадающего списка Показать цену Incomedia WebSite X5 Evolution 10 позволяет Вам выбрать один из четырёх вариантов отображения цены:

  1. С учётом налога.
  2. Без учёта налога.
  3. С учётом налога VAT info.
  4. Без учёта налога VAT info.

VAT (от английского Value Added Tax) – это то же самое, что и НДС в России и Украине, но для стран европейского союза и Великобритании.

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

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

В новой версии программы в этом объекте появились новые возможности. О них Вы можете подробнее прочесть в статье «Обзор Incomedia WebSite X5 Professional 10 (часть 1). Создание статического сайта».

HTML и виджеты

В статье «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов» были  рассмотрены все доступные виджеты данного объекта. А в статье «Уроки WebSite X5 (часть 2)» Вы сможете прочесть о примере вставки стороннего слайдера на страницу сайта.

О новых виджетах Вы можете прочесть в статье «Обзор Incomedia WebSite X5 11 Professional. Программа для создания HTML сайтов».

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

Создание интернет сайтов в Incomedia WebSite X5 Evolution 10, как уже говорилось ранее, разделено на пять этапов. Четвёртый – «Расширенные настройки».

На этом этапе Вам предлагается сделать более тонкую настройку Вашего сайта.

Главное меню

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» уже были рассмотрены некоторые параметры раздела Главное меню (рисунок ниже). Рассмотрим только новые.

Главное меню

Вкладка Общие и Пункты меню аналогичны бесплатной версии. На вкладке 3D-стиль (рисунок выше) Вы можете настроить внешний вид самих пунктов меню.

В спадающем списке Фигура вы можете выбрать одну из двадцати восьми фигур для пункта меню.

  1. Прямоугольник.
  2. Скруглённый прямоугольник.
  3. Скруглённый прямоугольник сверху.
  4. Скруглённый прямоугольник снизу.
  5. Скруглённый прямоугольник слева.
  6. Скруглённый прямоугольник справа.
  7. Скруглённый прямоугольник слева-сверху.
  8. Скруглённый прямоугольник слева-снизу.
  9. Скруглённый прямоугольник справа-сверху.
  10. Скруглённый прямоугольник справа-снизу.
  11. Бриллиант.
  12. Бриллиант сверху.
  13. Бриллиант снизу.
  14. Бриллиант слева.
  15. Бриллиант справа.
  16. Бриллиант слева-сверху.
  17. Бриллиант слева-снизу.
  18. Бриллиант справа-сверху.
  19. Бриллиант справа-снизу.
  20. Круг.
  21. Трапеция сверху.
  22. Трапеция снизу.
  23. Трапеция сверху слева.
  24. Трапеция снизу справа.
  25. Трапеция сверху справа.
  26. Трапеция снизу справа.
  27. Параллелограмм слева.
  28. Параллелограмм справа.

На рисунке ниже Вы можете видеть примеры фигур пунктов меню в порядке следования их в списке выше.

Примеры вкладок

Радиус закругления позволяет задать степень скругления углов пунктов меню. Опция Слияние форм кнопок сделает пункт меню в виде прямоугольника без скруглений и объединит все пункты меню в единую линию при условии. Данная опция работает в сочетании с такими опциями как Пропорции и Стиль рамки.

Конструктор сайтов HTML позволяет Вам задать особые эффекты оформления меню при помощи опции Пропорции. Можно задать один из тринадцати типов пропорции:

  1. Плоский.
  2. Плоский на подложке.
  3. Фаска.
  4. Вогнутая рамка.
  5. Пластик.
  6. Светящийся.
  7. Гель.
  8. Рельефный.
  9. Стекло.
  10. Светлый.
  11. Офис 2003.
  12. Офис 2007.
  13. Vista.

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

Примеры пропорций

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

  1. Сверху – Слева.
  2. Сверху.
  3. Сверху – Справа.
  4. Справа.
  5. Снизу – Справа.
  6. Снизу.
  7. Снизу – Слева.
  8. Слева.
  9. По центру.

На рисунке ниже приведён пример различного направления света (в порядке следования их в списке выше) для пропорции Плоский на подложке.

Направление света

Коэффициент градации (от 0 до 10) позволяет задать «чёткость» проявления градиента.

Непрозрачность изображения (от 1 до 100) позволяет задать степень прозрачности пункта меню.

Создание интернет сайтов, в целом, при помощи Incomedia WebSite X5 Evolution 10 - это пошаговый процесс. То же самое происходит при работе с каждым объектом. Вы пошагово меняете его настройки для достижения нужного результата.

Стиль рамки. Каждый пункт меню можно обвести ив рамку. Доступно четыре вида рамок.

  1. Нет.
  2. Обычный.
  3. Фаска.
  4. Вогнутая рамка.

На рисунке ниже показаны три примера рамок (со 2 по 4 из списка выше).

Пример рамок

Опции Внешняя ширина и Внутренняя ширина позволяют задать ширину внешней и внутренней рамки вкладок меню в пикселях от 0 до 15.

Только внешняя рамка. Если Вы активировали опцию Слияние форм кнопок, то при помощи опции Только внешняя рамка можно задать только одну внешнюю рамку без деления пунктов меню вертикальными линиями.

Пример настройки стиля главного меню средствами Website Evolution Вы можете посмотреть на тестовом сайте.

Раскрывающееся меню

Очень часто создание интернет сайтов подразумевает наличие категорий и подкатегорий тем (разделов) сайта. Это должно быть отражено в меню. Incomedia WebSite X5 Evolution 10 при помощи расширенных настроек Стиль раскрывающегося меню (рисунок ниже) позволяет настроить внешний вид подменю.

Стиль раскрывающегося меню

Сам инструмент разделён на три вкладки.

  1. Общие.
  2. Пункты меню.
  3. 3D-стиль. Данная вкладка аналогична вкладке 3D-стиль инструмента Главное меню, рассмотренного выше.

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

Тип меню. Конструктор сайтов HTML позволяет выбрать один из двух типов раскрывающегося меню.

  1. Расположить в один столбец.
  2. Расположить в несколько столбцов.

Ширина. Ширина подпунктов меню в пикселях.

Поля. Отступ от текста пункта меню до края пункта меню в пикселях по горизонтали и вертикали.

Шрифт. Можно задать кегль, гарнитуру и начертание шрифта.

Выравнивание. Выравнивание надписей пунктов меню (Слева, По центру, Справа).

Эффект. Эффект появления и исчезновения подпунктов меню. Доступно пять.

  1. Нет.
  2. Исчезновение.
  3. Эффект ухода вверх.
  4. Эффект ухода влево.
  5. Эффект ухода вверх и влево.

Настройки для типа меню Расположить в несколько столбцов аналогичны, за исключением того, что для него доступна ещё одна опция Максимальное количество объектов в столбце. Она позволяет задать число пунктов меню в одном столбце. Если их будет больше, то остальные перейдут в другой столбец.

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

Пункты меню

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

  1. Пункт меню. Когда на него не наведён курсор мыши.
  2. Элемент при наведении курсора мыши. Пункт меню, когда на него навели курсор мыши.
  3. Разделитель. Оформление разделителя меню. Подробнее о том, каким образом можно создавать разделители, Вы можете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов».

Некоторые опции для этих элементов схожи. Не будем их рассматривать несколько раз. Рассмотрим опции для Пункта меню.

  • Цвет фона. Цвет фона подпункта меню.
  • Цвет текста. Цвет текста надписи подпункта меню.
  • Цвет рамки. Цвет обводки подпункта меню.
  • Фоновое изображение. Incomedia WebSite X5 Evolution 10 в качестве фона позволяет задать изображение формата JPEG, JPG, GIF, PNG.
  • Маркер списка. Можно отображать небольшое изображение формата JPEG, JPG, GIF, PNG рядом с каждым пунктом раскрывающегося меню.

Настройки Элемент при наведении курсора мыши не сильно отличаются от рассмотренных выше. Но есть опция Стиль шрифта. Можно задать начертание шрифта Обычный, Полужирный, Курсив, Полужирный Курсив.

В настройках элемента Разделитель присутствуют опции, рассмотренные выше.

В конце статьи «Обзор WebSite Evolution 10 (часть 10). Создание сайта HTML» Вы можете скачать файл проекта (*.IWZIP) тестового сайта к данному циклу статей.

Как видите, конструктор сайтов HTML Incomedia WebSite X5 Evolution 10 позволяет немного упростить работу путём применения одного стиля элемента сразу на всех страницах сайта. В следующей статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 7). Создание сайта с нуля» мы продолжим рассмотрение расширенных настроек программы и затронем такие как: Меню страницы, Стиль и модели, Страница приветствия и Рекламное сообщение.

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

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

 

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