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

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

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

 

 

В предыдущей статье «Обзор Incomedia Website X5 Evolution 10 (часть 1). Платный конструктор сайтов» мы рассмотрели возможные готовые шаблоны, которые может предложить нам конструктор сайтов. В этой части поговорим о том, как редактировать шаблоны для Website X5 Evolution средствами самой программы.

Шаблоны для Website X5 Evolution

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

Website Evolution

Website Evolution в сочетании с графическим редактором (например, GIMP) поможет Вам создать свой уникальный шаблон. Окно Настроить шаблон визуально разделено на две основные области: «Инструменты» и «Область предварительного просмотра». Во второй области Вы будете видеть общий макет того, как будут выглядеть Ваши шаблоны для Website Evolution. Рассмотрим инструменты первой области.

  • Тип меню. Вы можете выбрать одно из четырёх типов (месторасположений) меню. Горизонтально - меню над 'шапкой' сайта, Горизонтально - меню под 'шапкой' сайта, Вертикально – меню слева, Вертикально – меню справа.
  • Раздел страницы. Шаблоны для Website X5 Evolution можно условно разделить на семь областей. Фон страницы, Фон 'шапки' страницы, 'Шапка' страницы, Меню, Контент страницы, 'Подвал' страницы, Фон 'подвала' страницы.

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

Фон страницы. На рисунке выше показаны инструменты фона страницы. Выбрав опцию Цвет (рисунок ниже) Вы сможете задать цвет страницы из предложенной палитры (включая прозрачность), при помощи инструмента выбора цвета (справа от кнопки Другие цвета) можно выбрать нужный цвет с изображения или, нажав на кнопку Другие цвета, задать свой цвет, указывая параметры для опций Оттенок, Контраст, Яркость, Красный, Зеленый, Синий. Можно воспользоваться цветовой шкалой.

Цвет

В качестве фона можно установить изображение. Для этого служит опция Фоновое изображение. Поддерживаются форматы файлов JPG, JPEG, GIF, PNG.

Если в качестве фона задано изображение, то можно задать ему положение (Без повторения, Повторение по горизонтали, Повторение по вертикали, Замостить изображение, По ширине окна) и выравнивание (Сверху – Слева, Сверху, Сверху – Справа, По центру – Слева, По центру, По центру – Справа, Снизу – Слева, Снизу, Снизу – Справа). На тестовом сайте Вы можете видеть, что в качестве фона задано изображение, положение – Повторение по горизонтали, выравнивание Сверху - Слева. Само изображение шириной 6 пикселей, высотой 1016 пикселей. Размер – 1,01 Кб. Но за счёт повторения заполняет весь экран (любого разрешения), создаёт эффект градиента, при этом мало влияет на скорость загрузки сайта. По крайней мере не так сильно, как при загрузке, например, картинки 1920 на 1080. На тестовом сайте я попытался воссоздать шаблон сайта  Aleksius.com.

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

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

Выравнивание. Вы Можете выровнять весь Ваш сайт Слева, По центру или Справа в окне рабочей области браузера. Сейчас самый распространённый вариант – по центру. Ранее было принято выравнивать сайты слева.

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

Фон шапки страницы

'Шапка' страницы. Содержит одну важную опцию – Ширина (рисунок ниже). К сожалению, шаблоны для Website X5 Evolution могут быть только фиксированной ширины (от 320 пикселей до 1920 пикселей). Именно опция Ширина как раз и задаёт ширину не только шапки сайта, но и всего сайта в целом. В качестве фонового изображения можно задать файлы формата JPG, JPEG, GIF, PNG и SWF.

Шапка страницы

Настройки области Меню (рисунок ниже) аналогичны рассмотренным выше.

Меню

Контент страницы. В настройках контента (рисунок ниже) программа Website X5 позволяет настроить минимальную высоту области контента (от 0 до 1920 пикселей), опция Высота контента, и задать отступы от содержимого страницы (контента) до края страницы (от 0 до 250 пикселей). Задав, например, в поле Высота контента значение 300, Вы сделаете так, что даже при фактическом содержимом страницы  менее 300 пикселей  высота области контента всё равно будет 300 пикселей.

Контент страницы

Это делается для минимизации подобных (рисунок ниже) случаев.

Шаблоны для Website X5 Evolution

Шаблоны для Website X5 Evolution, к сожалению, ещё не поддерживают реагирующий дизайн, но подобные вышеописанным опции  помогут Вам минимизировать случаи неправильного отображения сайта на разных экранах и с разным содержимым.

'Подвал' страницы. Опции для подвала страницы (рисунок ниже) аналогично описанным выше. В качестве фонового изображения можно задать файлы формата JPG, JPEG, GIF, PNG и SWF.

Подвал страницы

Фон 'подвала' страницы. Опции для фона подвала страницы (рисунок ниже) аналогично описанным выше.

Фон подвала страницы

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

Правка шаблона

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

Incomedia WebSite Evolution 10

Incomedia WebSite Evolution 10 предлагает куда больше возможностей, чем Free версия. Рассмотрим те из них, которых не было или были изменены в сравнении с бесплатной версией.

Вставить ссылку на этот объект. Данный инструмент позволяет вставлять различные «типы ссылок» или «Действие» (рисунок ниже) при нажатии на тот или иной объект в шапке сайта.

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

Конструктор сайтов позволяет добавить одно из четырнадцати действий. Часть из них была рассмотрена в статье «Обзор Incomedia WebSite X5 Free 10 (часть 3). Создаем сайт сами». Рассмотрим новые или изменённые. Эти же действия можно применять к тексту и изображениям в содержимом сайта и к объектам в нижнем колонтитуле.

Файл или URL Show Box. Данное действие (рисунок ниже) позволяет Вам открыть во всплывающем окне для просмотра файл, например PDF (если соответствующий плагин установлен у пользователя в браузере), при помощи опции Локальный файл на компьютере. Или можно открыть любой сайт, задав адрес нужной страницы в поле Файл в Инернет. Опция Размеры служит для указания ширины и высоты всплывающего окна. В поле Заголовок можно ввести текст, который будет отображаться в левом нижнем углу всплывающего окна. Пример работы данного действия Вы можете увидеть на тестовом сайте.

WebSite X5 Evolution 10

WebSite X5 Evolution 10 также позволяет назначить в качестве действия по нажатию на объект показ галереи изображений во всплывающем окне. Это можно сделать при помощи действия Галерея ShowBox (рисунок ниже). При помощи кнопки Добавить Вы добавляете изображения в формате JPG, JPEG, GIF, PNG, PSD, BMP, TIF, DIB, PCX, RLE, TGA, WMF, затем при помощи кнопок со стрелками вверх и вниз Вы можете поправить порядок следования изображений в слайд-шоу. Пример работы данного действия  можно увидеть на тестовом сайте.

Incomedia WebSiteX5 Evolution

Incomedia WebSite X5 Evolution, в отличие от своей бесплатной версии, позволяет добавить действие Звук (рисунок ниже). Просто укажите в поле Локальный Файл на компьютере один из файлов в формате MOV, MP3, WMA, WAV, MID, AIF, M4A. Или введите в поле Файл в интернете адрес файла, в сети интернет. Пример работы данного действия  можно увидеть на тестовом сайте.

Звук

Лента RSS. Если на Вашем сайте предусмотрена RSS лента (инструменты по её созданию будут описаны в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 8). Создание WEB сайтов»), то назначив действие Лента RSS (рисунок ниже) пользователь сможет подписаться на новости Вашего сайта в формате RSS. Пример работы данного действия Вы можете увидеть на тестовом сайте.

Лента RSS

Блог. Конструктор сайтов позволяет создавать блог. Инструменты по его созданию будут описаны в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 8). Создание WEB сайтов». Данное действие (рисунок ниже) позволит Вам создать ссылку на блог. Можно указать в каком окне (в этом же или новом) необходимо открывать страницу блога. Пример работы данного действия Вы можете увидеть на тестовом сайте.

Блог

Показать корзину. Incomedia WebSite X5 Evolution 10, в отличие от бесплатной её версии, позволяет создать интернет магазин. Пусть не такой «функционально-расширенный» как, например, интернет магазины на базе CMS. Данное действие (рисунок ниже) позволяет создать ссылку, при нажатии на которую пользователь перейдёт в свою корзину, чтобы уточнить, что именно он в неё добавил. Инструменты электронной коммерции будут описаны в статье «Обзор WebSite Evolution 10 (часть 9). Создание сайта своими руками». Пример работы данного действия Вы можете увидеть на тестовом сайте. Пример «карточки товара» вы можете увидеть на тестовом сайте.

Показ корзины

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

  • Добавить выбранный товар прямо в корзину. Позволяет добавить указанный Вами товар прямо в корзину пользователя в случае, если он нажмёт на ссылку с этим действием.
  • Показать список товаров выбранной категории. Отображает список товаров указанной Вами категории товаров.
  • Выберите/категорию товары. Список всех созданных Вами категорий товаров и товаров.
  • Категории. Это поле настраивается при создании товара. Вы можете указать, с какими дополнительными «условиями» будет продан данный товар.
  • Количество. Количество единиц данной продукции.

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

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

Инструмент Вставить текст (рисунок ниже) похож на аналогичный в бесплатной версии. Детальнее о нём  можно прочесть в статье «Обзор Incomedia WebSite X5 Free 10 (часть 2). Программа конструктор сайтов».

Website X5 Evolution

Website X5 Evolution позволяет сохранить текстовую надпись как отдельное от остальной части шапки изображение в формате PNG. То есть, если опция отключена, то вся шапка сайта будет в виде одного изображения в формате PNG. У меня размер такого изображения 22,5 Кб. Если включить данную опцию, то у Вас будет 2 изображения: шапка сайта и отдельно надпись. У меня шапка сайта в этом случае занимает 16,9 Кб, а надпись -  5,28 Кб (вместе 22,18 Кб). Размер файла не имеет почти никакого значения . А вот 2 объекта  вместо одного – это 2 запроса к серверу вместо одного. Рекомендуется снижать количество запросов к серверу. Так что без надобности не стоит активировать опцию Сохранить как PNG.

Помимо опции Сохранить как PNG в Evolution 10, в сравнении с Free 10, добавлено ещё пять типов эффектов для текста. Рассмотрим их более детально.

  • Непрозрачность. Позволяет задать прозрачность текста. От 0 до 100.
  • Размытие. Позволяет сделать текст размытым. При помощи опции Диффузия можно задать степень размытия от 0 до 50.
  • Волна. Данный эффект исказит текст по траектории волны. При помощи параметров Диффузия и Частота можно изменять вид волны.
  • Перспектива. Данный эффект исказит текст по горизонтали или по вертикали.
  • Наклон. Данный эффект придаст наклон тексту по горизонтали или вертикали. Наподобие курсивного начертания шрифта.

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

Эффекты

Также можно вставить изображение в шапку сайта при помощи инструмента Вставить изображение (рисунок ниже).

Программа Website X5 Evolution 10

Программа Website X5 Evolution 10, в отличие от Free версии позволяет убирать фон у изображений. Для этого служит опция Разрешить прозрачность. При помощи настройки Прозрачный цвет Вы указываете тот цвет, который нужно сделать прозрачным, а при помощи опции Допуск прозрачности Вы задаёте отклонение для цвета, который программа Website X5 должна сделать прозрачным. Например, если на белом фоне (с серыми пятнами) стоит красная чашка, то задав белый в качестве прозрачного цвета и установив небольшой допуск (для того, чтобы захватить серые пятна), программа уберёт белый фон с серыми пятнами и оставит красную чашку.

Конструктор сайтов Incomedia WebSite X5 Evolution 10 позволяет добавить в шапку Flash анимацию. Для этого предназначен инструмент Вставить Flash-анимацию. Просто укажите SWF файл.

Инструмент Вставить слайд-шоу (рисунок ниже) позволяет разместить анимированное слайд-шоу в шапке сайта.

Website X5

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

Incomedia

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

На вкладке Масштаб и положение (рисунок ниже) конструктор сайтов Incomedia WebSite Evolution 10 позволяет задать конечный масштаб и положение изображения в области слайд-шоу. Если масштаб изображения – 100%, то указание положения картинки по оси X или Y невозможно.

Масштаб и положение

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

Стрнаица

Пример работы слайд-шоу Вы можете увидеть на тестовом сайте.

Инструмент Вставить HTML-код рассмотрим немного ниже.

Вставить поле поиска. Если на Вашем сайте много информации на разных страницах, то целесообразно использовать поиск. Советую ознакомиться с некоторыми рекомендациями о том, каким должен быть поиск по сайту. Об этом немного детальнее написано в статье «Обзор Joomla поиск». Также обратите Ваше внимание на то, что можно использовать в качестве поиска по сайту не встроенный механизм от Incomedia WebSite X5 Evolution 10, а Google Site Search или Яндекс поиск по сайту.

Поиск

Программа Website X5 позволяет настроить внешний вид поиска (рисунок выше).

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

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

Шаблоны для Website X5 Evolution помимо шапки сайта содержит подвал (нижний колонтитул). Его можно настраивать на вкладке ‘Подвал’ страницы (рисунок ниже).

Подвал страницы

Доступны все те же опции, что и для шапки страницы. На тестовом сайте Вы можете видеть, что в подвале сайта расположено меню и текст. Это сделано при помощи инструмента Вставить HTML-код. Вы можете вставить в поле HTML-код любой произвольный HTML код и конструктор сайтов Incomedia WebSite X5 Evolution 10 будет выводить его, интерпретируя команды HTML языка.

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

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

HTML виджеты

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

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

Date Time

Google News Box. Данный виджет (рисунок ниже) позволяет выводить новости с сайта Google News. Можно задать размер виджета 728х90 (Leader board) или 320х250 (Прямоугольник). Также Вы можете выбрать, какие разделы новостей отображать. А именно:

  1. Самое интересное.
  2. Мировые новости.
  3. Новости бизнеса.
  4. Политические новости.
  5. Национальные новости.
  6. Новости о развлечениях.
  7. Новости технологий.
  8. Спортивные новости.
  9. Новости о здоровье.

Google News Box

В спадающем списке Язык Вы можете указать язык новостей. Доступно около 35 языков, включая украинский и русский. Можно выбрать [Auto] и тогда новости будут отображаться на текущем языке сайта.

Google Translate. Вы можете предоставить возможность Вашим посетителям самостоятельно выбирать язык сайта при помощи виджета Google Translate.

Google Translate

В спадающем списке Язык сайта можно указать исходный язык содержимого сайта  или оставить параметр Определить язык. Доступно около 56 языков, включая украинский, русский, английский, немецкий и так далее. Безусловно, автоматический перевод не сравнится с «ручным». Такой перевод подойдёт для личного сайта. Но для сайта фирмы это, на мой взгляд, неприемлемо. Солидной фирме необходим высокий уровень. Есть ещё один способ перевода сайтов. Детальнее о нём Вы можете прочесть в статье «Обзор GTranslate Enterprise. Перевод Joomla». Сервис GTranslate Enterprise подойдёт не только для Joomla или других CMS, но и для любого сайта. В том числе для сайта, сделанного при помощи Incomedia WebSite X5 Evolution 10. Пример работы виджета Google Translate Вы можете увидеть на тестовом сайте.

Виджет Youtube news (рисунок ниже) позволяет выводить в шапке или подвале Вашего сайта новости с видео-хостинга Youtube. Возможно выбирать один из источников:

  1. CBS News Online.
  2. Euronews.
  3. Английский Al-Jazeera.
  4. The Associated Press.
  5. The Washington Post.
  6. ITN News.
  7. The New York Post.
  8. Bloomberg.
  9. France24 English.
  10. The New York Times.
  11. Russia Today.
  12. C-SPAN.
  13. Лучшие новости видео.

Youtube news

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

Login

Для редактирования Вам доступно несколько опций.

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

Виджет Logout (рисунок ниже) позволяет разместить кнопку выхода зарегистрированного пользователя из своей учётной записи.

Logout

Конструктор сайтов Incomedia WebSite X5 Evolution 10 позволяет разместить PDF файл в шапке или подвале сайта. Для этого предназначен виджет PDF File (рисунок ниже).

Вы можете указать URL адрес файла в поле Файл в Интернет и задать высоту области просмотра файла (опция Высота).

PDF файл

Аналогично PDF файлу Вы можете разместить PPT файл (презентация Microsoft PowerPoint). Именно для этого и служит виджет PPTFile (рисунок ниже).

PPT файл

Программа Website X5 позволяет Вам разместить счётчик посещаемости сайта от  Shinystat.com. Для этого предназначен виджет Shinystat Counter (рисунок ниже). Вам необходимо зарегистрироваться на сайте Shinystat.com, а затем ввести свои данные в поле Имя пользователя на Shinystat.com в виджете Shinystat Counter.

Shinystat Counter

Для тех, кто создаёт интернет магазин, конструктор сайтов Incomedia WebSite X5 Evolution 10 предоставляет возможность разместить корзину товаров в шапке или подвале сайта. Рекомендуется в шапке справа. Для этого предназначен виджет Shopping Cart (рисунок ниже)

Shopping Cart

В его настройках в поле Тип Вы можете выбрать, какой тип данных будет отображаться: Общая стоимость, Всего товаров, Вес.

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

Программа Website X5 Evolution 10 дополнилась весьма полезными возможностями в сравнении с 9-й версией. Безусловно, создание таких типов сайтов как интернет магазин (с большим количеством категорий товаров и товаров), возможно, не очень удобно при помощи этой программы. Но стоит отметить, что сайты-визитки, небольшие сайты фирм, промо-сайты, домашние страницы, сайты школ и некоммерческих организаций найдут для своих целей многое из того, что может им понадобиться для создания своего «островка в океане интернета».

В следующей статье «Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов» мы рассмотрим возможности программы Website X5 по созданию карты сайта и изменению свойств страниц проекта.

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

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

 

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