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

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

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

 

 

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

Перед тем, как непосредственно наполнять страницу, необходимо её разметить.

Разметка страниц

Под разметкой я понимаю «разделение» страницы на строки и столбцы (рисунок ниже).

Разметка страниц

Таким образом, Вы создаёте некий «макет» будущей страницы. Однако, не обязательно, чтобы объекты (текстовый блок, слайд-шоу, изображение и так далее) помещались только в одну ячейку. Они могут занимать несколько рядом лежащих ячеек (рисунок ниже).

Размещение объектов

Если обратить внимание на панель над «макетом» (рисунок выше), то там доступно одиннадцать инструментов (слева направо):

  1. добавление контента в выбранный объект (выбрав объект, например, Видео/звук и нажав на этот инструмент перед Вами откроется панель редактирования объекта Видео/звук).
  2. Формат ячейки.
  3. Выравнивание. Выбрав объект, например Видео/звук, и нажав на этот инструмент, перед Вами откроется список с возможностью указания как именно будет выровнен объект Видео/звук на странице по отношению к другим объектам, но внутри своей ячейки (по вертикали (по верхнему краю, по центру, по нижнему краю) и горизонтали (по левому краю, по центру, по правому краю)).
  4. Распределить выбранный объект на одну свободную ячейку вправо. При выбранном объекте и пустой ячейке справа, «растягивает» этот объект на свободную ячейку.
  5. Распределить выбранный объект на одну свободную ячейку вниз. При выбранном объекте и пустой ячейке внизу, «растягивает» этот объект на свободную ячейку.
  6. Распределить выбранный объект на одну свободную ячейку влево. При выбранном объекте и пустой ячейке слева, «растягивает» этот объект на свободную ячейку.
  7. Распределить выбранный объект на одну свободную ячейку вверх. При выбранном объекте и пустой ячейке сверху, «растягивает» этот объект на свободную ячейку.
  8. Добавить строку. Добавляет строку в «макет» страницы. Если у вас есть две и более строки, Incomedia WebSite X5 Evolution выдаст запрос, в котором нужно указать после какой строки добавить новую. Нужно ввести номер строки (слева от области «макета» есть цифры (рисунок выше), они указывают на порядковый номер той или иной строки).
  9. Добавить столбец. Добавляет столбец справа в «макет» страницы.
  10. Удалить строку. Выведет запрос, где указывается, какой номер строки, нужно удалить.
  11. Удалить столбец. Удаляет правый крайний столбец «макета» страницы.

Немного детальнее рассмотрим инструмент Формат ячейки. На рисунке ниже представлена панель редактирования «графических» параметров ячейки.

Панель редактирования «графических» параметров ячейки

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

Пример прозрачного фона

Давайте выберем какой-нибудь цвет (рисунок ниже).

Выбор цвета

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

Пример фона по выбранному цвету

Можно в качестве фона, указать градиент (рисунок ниже).

Выбор градиента для фона

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

Заливка градиентом

Также в качестве заливки ячейки можно указать изображение (рисунок ниже).

Выбор изображения для фона

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

Фоновое изображение

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

Настройка границ ячейки

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

Границы ячейки

На рисунке ниже представлена панель редактирования «текстовых» параметров ячейки.

Панель редактирования «текстовых» параметров ячейки

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

Результат создания заголовка и описания

Можно сделать заголовок ячейки в виде рисунка (рисунок ниже).

Настройка заголовка ячейки

Результат представлен на рисунке ниже.

Пример заголовка ячейки

В Incomedia WebSite Evolution существует 10 объектов (рисунок ниже) для размещения их в «макете» страницы.

  • Текст.
  • Изображение.
  • Таблица.
  • Flash анимация.
  • Видео/Звук.
  • Галерея изображений.
  • Слайд-шоу.
  • E-mail форма.
  • HTML код.
  • Список продуктов.

Объекты Incomedia WebSite X5 v8 Evolution

При помощи этих объектов Вы можете наполнять страницы сайта различным содержимым легко и просто. Без знания специальных языков (HTML, CSS, Flash и Java). Давайте рассмотрим эти объекты немного детальнее.

Объекты

Текст

Первый рассматриваемый объект - это Текст (рисунок ниже).

Объект Текст

Этот объект предназначен для вставки и форматирования текстовых блоков. Помимо самого текста, есть возможность вставить рисунки, OLE объекты, гиппер-ссылки и произвольный HTML код. Так же существует возможность вставки математических формул, но при условии, что установлен Equation Editor. Непосредственно с текстом возможно менять гарнитуру, кегль, начертание, цвет текста, цвет заливки текста, выравнивание, создавать маркированные списки, задавать вертикальную прокрутку (на подобие бегущей строки). Для изображения можно указать выравнивание, изменить его размер и обтекание текста. Конечно же, по сравнению, например, с редактором статей в Joomla, редактор статей Incomedia WebSite X5 Evolution не столь функциональный, но его вполне хватит для простого визуального форматирования текста. Ниже представлен рисунок с результатом форматирования текста и изображения.

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

Изображение

Для вставки изображения не в текст, а отдельной ячейкой в «макет» сайта в Incomedia WebSite Evolution предусмотрен инструмент Изображение. На рисунке ниже представлена основная панель настройки инструмента Изображение.

Основная панель настройки инструмента Изображение

Как видно, Вы просто указываете путь к изображению, а Incomedia WebSite X5 Evolution сам его распределяет в нужную ячейку. Доступно указать качество изображения (степень сжатия. Только для JPG), метод сжатия, назначить действие по нажатию на изображение мышью и отредактировать изображение. В Incomedia WebSite Evolution встроен простой визуальный редактор изображения. Он позволяет:

  • кадрировать,
  • Накладывать на изображение маску (80 масок с возможностью поворота и подключения своей собственной).
  • Принять эффекты (14 эффектов с настройками для каждого).
  • Применять фильтры (11 фильтров и у большинства есть настройки).
  • Применять рамки (96 рамок с возможностью поворота и подключения своей собственной).

На изображении ниже показаны все эти инструменты в порядке их перечисления в списке выше.

Инструменты настройки изображения

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

Пример отредактированного изображения

Если у Вас большое изображение, то при помощи вкладки Отображение инструмента Изображение (рисунок ниже) можно задать параметры увеличения изображения.

Вкладка Отображение инструмента Изображение

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

Таблица

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

Таблица

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

Редактор таблицы

Рассмотрим их более детально слева направо сверху вниз.

  1. Добавить строку.
  2. Добавить столбец.
  3. Удалить строку.
  4. Удалить столбец.
  5. Объединить ячейке.
  6. Разъединить ячейке.
  7. Цвет заливки ячейке.
  8. Цвет границы выбранной ячейке (ячеек). Если выбрана вся таблица, то цвет границ всей таблицы.
  9. Выравнивание в ячейке по верхнему краю.
  10. Выравнивание в ячейке по центру.
  11. Выравнивание в ячейке по нижнему краю.

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

Пример таблицы

Flash анимация

Для вставки Flash анимации в Incomedia WebSite X5 Evolution присутствует объект с одноимённым названием. Его настройки показаны на рисунке ниже.

Flash анимация

Как видно, Вы можете не только указать локальный путь к файлу но и интернет адрес. Например, адрес видео ролика на YouTube. Также возможно указать прозрачный фон для проигрывателя, замещающий текст, версию проигрывателя Flash, ширину и высоту видео файла.

Видео/Звук

Если Вам необходимо вставить видео или звук на страницу, то это можно сделать при помощи инструмента Видео/Звук (рисунок ниже).

Видео/Звук

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

Будьте внимательны! Не указывайте файлы большого размера (например, больше 300-500 Мб) в качестве подключаемых локально. Это может сделать время кодировки неприемлемо большим! Следите, чтобы в полном имени файла (путь, имя файла, расширение файла) были только буквы английского алфавита.

Галерея изображений

Панель настройки галереи изображений содержит три вкладки (рисунок ниже).

  1. Список.
  2. Настройки.
  3. Миниатюры.

Панель настройки галереи изображений

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

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

  1. Классическая.
  2. Горизонтальная презентация с миниатюрами под изображением.
  3. Горизонтальная презентация с миниатюрами над изображением.
  4. Вертикальная презентация с миниатюрами слева от изображения.
  5. Вертикальная презентация с миниатюрами справа от изображения.
  6. Горизонтальный список.
  7. Вертикальный список.

У каждого из этих типов есть настройки. Ниже я приведу пример всех семи типов с настройками для каждого в порядке следования в списке выше.

Типы галереи

На вкладке Миниатюры можно задать рамку для миниатюр галереи (рисунок ниже). Всего доступно 30 рамок и есть возможность загрузить свою.

Вкладка Миниатюры

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

Пример галереи изображений

Слайд-шоу

Объект Слайд-шоу напоминает Галерею изображений, но у него немного меньше настроек. Первая вкладка Список (рисунок ниже) почти полностью такая же, как и у Галереи изображений.

Вкладка Список

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

Вкладка Настройки

Результат настройки слайд-шоу показан на рисунке ниже.

Пример слайд-шоу

E-mail форма

Инструмент E-mail форма служит для создания формы отправки писем посредством сайта. Все настройки разделены на три вкладки.

  1. Список.
  2. Отправить.
  3. Графика.

На вкладке Список (рисунок ниже) Вы создаёте непосредственно форму.

Вкладка Список

Для создания E-mail форм в Incomedia WebSite Evolution предусмотрено десять объектов с различными настройками.

  1. Текст (строка).
  2. Адрес электронной почты.
  3. Текстовая область.
  4. Дата.
  5. Спадающий список.
  6. Список.
  7. Множественный выбор.
  8. Радио кнопка.
  9. Прикрепить файл.
  10. Проверочный вопрос.

У каждого из этих объектов есть настройки. Ниже я приведу пример всех десяти объектов с настройками для каждого в порядке следования в списке выше.

Настройки E-mail

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

Вкладка Отправить

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

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

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

Пример формы отправки писем

HTML код

Из всего вышеперечисленного, включая первую часть обзора, можно сделать поспешный вывод о том, что Incomedia WebSite X5 Evolution крайне ограничен в своих возможностях. Так как со знанием HTML, CSS, Flash и Java можно делать такие вещи, что Incomedia WebSite Evolution и «не снилось». Однако, это не совсем так. Если Вам чего-то не хватает из стандартного функционала, предлагаемым Incomedia WebSite X5 Evolution, то объект HTML код (рисунок ниже) это исправит. Этот объект позволяет вставить произвольный HTML код на Вашу страницу.

Объект HTML код

Редактор HTML кода очень простой. Всего восемь инструментов.

  1. Вырезать.
  2. Копировать.
  3. Вставить.
  4. Отменить.
  5. Счётчик на главной странице.
  6. Интернет объект. Google AdSense, PayPal.
  7. Свойства страницы. Подробнее рассмотрено в предыдущей статье «Обзор Incomedia WebSite X5 v8 Evolution (часть 2). Программы для создания web-сайтов»
  8. Прикрепить файл к HTML коду.

Немного подробнее о Счётчике на главной странице (рисунок ниже).

Счётчик на главной странице

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

Также в настройках объекта HTML код Вы можете указать высоту объекта (в пикселях) и указать использовать или нет полосу прокрутки.

В настройках объекта HTML код возможно ещё и вставка специальной таблицы стилей. Это можно сделать на вкладке CSS (рисунок ниже).

Вкладка CSS

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

Данный объект (рисунок ниже) понадобится только в том случае, если Вы хотите сделать интернет магазин. Безусловно, до Magento и VirtueMart Incomedia WebSite X5 v8 Evolution в качестве средства электронной коммерции явно не дотягивает. Но сделать «интернет киоск» можно.

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

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

Вкладка Настройки

Доступно четыре типа отображения товара.

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

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

Типы отображения товаров

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

Пример отображения товара

Действия

Под действием я понимаю выполнение определённой команды, после того как пользователь нажмёт на конкретны объект. Например, при нажатии на маленький рисунок принтера – распечатать текущую страницу сайта, при нажатии на изображение – открыть его увеличенную копию и так далее. В Incomedia WebSite X5 v8 Evolution доступно шестнадцать действий по нажатию.

  1. Страница сайта.
  2. Открыть файл.
  3. Всплывающее окно.
  4. Звук.
  5. E-mail.
  6. Интернет звонок.
  7. Напечатать эту страницу.
  8. Окно сообщения.
  9. Слайд-шоу.
  10. Добавить в избранное.
  11. Страница по умолчанию.
  12. RSS лента.
  13. Блог.
  14. Карта сайта.
  15. Показать корзину.
  16. Заказать продукт.

Давайте рассмотрим эти действия немного детальнее.

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

Страница сайта

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

Описание

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

Пример описания

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

Открыть файл. Данная команда позволит Вам, например, прикрепить для скачивания или открытие PDF файла (как в текущем окне, так и в новом). Параметры, доступные для настройки действия Открыть файл, представлены на рисунке ниже.

Настройки действия Открыть файл

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

Настройки действия Всплывающее окно

Очень удобно таким способом делать увеличение миниатюр изображений. На рисунке ниже приведён пример реализации всплывающего окна с увеличенным изображением и подписью.

Пример всплывающего окна

Звук. Команда Звук позволит вставить звуковой файл (WAV, MP3, WMA, MID), который будет проигрываться при нажатии. Можно задать в качестве содержимого файл, находящийся на Вашем сайте или указать адрес в интернете.

Настройки действия Звук

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

Настройки действия E-mail

Интернет звонок. При нажатии откроется программа, которая в операционной системе установлена по умолчанию для интернет звонков (например, ooVoo, Skype). На рисунке ниже показаны настройки доступные для этого действия.

Настройки действия Интернет звонок

Напечатать эту страницу. Печатает текущую страничку сайта. Можно, например, на пиктограмму принтера назначить действие Напечатать страницу. Настроек нет.

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

Настройки действия Окно сообщения

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

Пример окна сообщения

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

Настройки действия Слайд-шоу

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

Настройки действия Добавить в избранное

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

Настройки действия Страница по умолчанию

RSS лента. При помощи этого действия Вы сможете, например, назначить на изображение возможность подписи на Вашу RSS ленту сайта. Это возможно только при созданной RSS ленты. Как её создавать рассмотрим в следующей части обзора Incomedia WebSite X5 v8 Evolution.

Блог. При помощи этого действия Вы сможете, например, назначить на изображение или ссылку возможность перехода в блог. Как создавать блог рассмотрим в следующей части обзора Incomedia WebSite X5 v8 Evolution. На рисунке ниже показаны настройки, доступные для этого действия.

Настройки действия Блог

Карта сайта. Откроет страницу с картой Вашего сайта. Как создать карту сайта, было рассмотрено в статье «Обзор Incomedia WebSite X5 v8 Evolution (часть 1). Конструктор сайтов».

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

Заказать продукт. Добавит назначенный в настройках продукт в корзину пользователя. Данное действие будет полезно только в случае продажи на сайте каких-либо товаров. На рисунке ниже показаны настройки, доступные для этого действия. Как создавать товары для добавления к данному действию будет рассмотрено в следующей части обзора Incomedia WebSite X5 v8 Evolution.

Настройки действия Заказать продукт

В статье «Обзор Incomedia WebSite X5 v8 Evolution (часть 4). Программа для создания веб-сайтов» мы рассмотрим расширенные настройки программы, которые помогут Вам более тонко отладить Ваш сайт. Среди них:

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

Отмечу, что Incomedia WebSite X5 если не лучшая программа для создания сайта, то одна из лучших. Также считаю, что любая программа для создания интернет сайта должна обладать большинством из тех функций, которыми обладает Incomedia WebSite X5 Evolution.

 

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

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

 

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