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

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

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

 

 

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

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

Меню страницы

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

Website Evolution

В Website Evolution настройки меню страницы разделены на две вкладки:

  1. Общие.
  2. Пункты меню.

Рассмотрим первую вкладку Общие (рисунок выше).

  • Показать меню страницы. Активирует вывод меню на тех страницах, которые являются подразделами одного из разделов. Как создавать разделы мы рассмотрели в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов».
  • Положение меню. Можно задать положение для меню страницы (Слева или Справа).
  • Ширина. Ширина области меню в пикселях.
  • Поля. Отступ по горизонтали или вертикали в пикселях от области меню страницы до границы следующей области.
  • Расстояние между кнопками. Отступ между пунктами меню страницы.
  • Шрифт. Конструктор интернет сайтов Incomedia WebSite X5 Evolution 10 позволяет задать особую гарнитуру, кегль и начертание шрифта пунктов меню.
  • Выравнивание. Выравнивание надписей пунктов меню (Слева, По центру, Справа).
  • Толщина рамки. Можно задать обводку области меню страницы рамкой. И выбрать её толщину в пикселях. Разные стороны рамки могут иметь разную толщину.
  • Цвет рамки. Цвет границы области меню. Разные стороны рамки могут иметь разный цвет.
  • Закруглённые уголки. Углы рамки можно скруглить. Разные углы рамки могут иметь разную «степень скругления».
  • Тень. Website X5 позволяет задать тень от области меню страницы. Доступны параметры: Цвет, Смещение по X, Смещение по Y, Диффузия, Размер. Меняя эти параметры Вы можете изменять внешний вид тени.

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

Для настройки внешнего вида (стиля) меню страницы служит вкладка Пункты меню (рисунок ниже).

Incomedia WebSite X5 Evolution 10

Incomedia WebSite X5 Evolution 10 позволяет настроить стиль для пункта меню, элемента при наведении курсора мыши, разделителя или линии-разделителя. Какой именно элемент необходимо настроить,  выбираем в спадающем списке Пункт меню. Для разных элементов есть одинаковые настройки. Повторно не будем их рассматривать.

Элемент Пункт меню. Это состояние пункта меню, когда на него не наведён курсор мыши, и он не является страницей, на которой в данный момент находится пользователь.

  • Цвет фона. Фоновый цвет пункта меню (включая прозрачность).
  • Цвет текста. Цвет шрифта пункта меню.
  • Маркер списка. Можно отображать небольшое изображение формата JPG, JPEG, GIF, PNG рядом с каждым пунктом меню страницы.

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

Элемент при наведении мыши/текущая страница

Разделитель (рисунок ниже). Настройки стиля для разделителя разделов. Детальнее о нём можно прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов».

Разделитель

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

Линия разделитель

Стиль и модели

В статье «Обзор Incomedia WebSite X5 Free (часть 5). Бесплатный конструктор сайтов» мы уже рассматривали некоторые опции данного раздела расширенных настроек. Повторно к ним обращаться не будем.

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

Конструктор интернет сайтов Website X5 Evolution оснащён четырьмя вкладками с настройками стилей (рисунок выше).

  1. Текст. Рассмотрено в статье «Обзор Incomedia WebSite X5 Free (часть 5). Бесплатный конструктор сайтов».
  2. ShowBox.
  3. Подсказка. Рассмотрено в статье «Обзор Incomedia WebSite X5 Free (часть 5). Бесплатный конструктор сайтов».
  4. E-mail.

Рассмотрим опции, доступные на вкладке ShowBox (рисунок выше). Параметры, которые Вы меняете на данной вкладке, действуют на всём сайте и применяются к всплывающим окнам.

  • Эффекты перехода. Incomedia WebSite X5 Evolution 10 позволяет Вам задать один из пяти эффектов появления всплывающего окна: Нет, Исчезновение, Наехать сверху, Масштабирование, Увеличить и скрыть стартовую картинку.
  • Внешний цвет. Цвет фона вокруг всплывающего окна.
  • Внутренний цвет. Цвет области всплывающего окна.
  • Непрозрачность фона. Степень прозрачности фона вокруг всплывающего окна.
  • Цвет. Цвет текста надписей на всплывающем окне.
  • Шрифт. Website X5 позволяет задать гарнитуру, кегль и начертание шрифта текста на всплывающем окне.
  • Выравнивание. Выравнивание текста на всплывающем окне (Слева, По центру, Справа).
  • Толщина рамки. Можно задать обводку всплывающего окна рамкой. И выбрать её толщину в пикселях. Разные стороны рамки могут иметь разную толщину.
  • Цвет рамки. Цвет границы всплывающего окна. Разные стороны рамки могут иметь разный цвет.
  • Закруглённые уголки. Углы всплывающего окна. Разные углы рамки могут иметь разную «степень скругления».
  • Тень. Incomedia WebSite X5 Evolution 10 позволяет задать тень от всплывающего окна. Доступны параметры: Цвет, Смещение по X, Смещение по Y, Диффузия, Размер. Меняя эти параметры, Вы можете изменять внешний вид тени.

Создание сайта с нуля

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

В спадающем списке Элементы E-mail Вы можете выбрать один из четырёх элементов письма для которых можно задать настройки.

  1. Макет E-mail.
  2. Изображение логотипа компании.
  3. Содержание сообщения.
  4. Текст подвала страницы письма.

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

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

Изображение логотипа компании

Изображение логотипа компании (рисунок выше) позволяет Вам задать изображение формата JPG, JPEG, GIF или PNG (опция Изображение), выровнять его Слева, По центру, или Справа (опция Выравнивание), а также разместить его Внутри рамки или Снаружи рамки (опция Положение). При помощи опции Ширина Вы можете задать ширину изображения логотипа от 5 до 700 пикселей.

Создание сообщения

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

Текст ‘подвала’ страницы письма

Текст ‘подвала’ страницы письма (рисунок выше) в письмах, отправляемых с сайта, Incomedia WebSite X5 Evolution 10 позволяет вставлять внизу произвольный текст. В настройках оформления этой области можно не только изменить опции стиля, но и вписать сам текст.

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

Конструктор интернет сайтов Incomedia WebSite X5 Evolution 10 позволяет Вам в качестве домашней страницы установить страницу приветствия. Это может быть какой-то мультимедийный объект. На мой взгляд, с точки зрения удобства пользователя и SEO, стартовая страница в виде картинки, Flash-анимации или видео файла – не очень хорошая идея. Но для сайтов визиток и промо-сайтов это может быть полезным. Рассмотрим опции, доступные для настройки (рисунок ниже).

Website X5

Website X5 позволяет задать в качестве стартовой страницы один из четырёх типов объектов (опция тип).

  1. Картинка. Доступны форматы JPG, JPEG, GIF или PNG.
  2. Flash-анимация. SWF файл.
  3. Видео. Файл в формате MP4, WEBM, OGG, AAC, FLV.
  4. HTML-код. Произвольный HTML-код.

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

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

HTML-код

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

  • Цвет фона. Фоновый цвет страницы, включая прозрачность.
  • Изображение. Фоновое изображение страницы в формате JPG, JPEG, GIF или PNG.
  • Положения изображения. Если в качестве фона Вы задали изображение,  можно указать для него положение: Без повторения, повторение по горизонтали, Повторение по вертикали, Замостить изображение, По ширине окна.
  • Положения выравнивания. Если в качестве фона Вы задали изображение, то можно указать для него выравнивание: Сверху – Слева, Сверху, Сверху – Справа, По центру – Слева, По центру, По центру ­– Справа, Снизу – Слева, Снизу, Снизу – Справа.
  • Звук в качестве приветствия. Помимо всего вышеизложенного Вы можете задать фоновый звук в формате MP3 для страницы приветствия.
  • Переходить на главную страницу через [сек]. Можно задать интервал в секундах, после которого пользователь будет перенаправлен на главную страницу сайта.

Пример работы страницы приветствия Вы можете посмотреть на тестовом сайте.

Конструктор интернет сайтов Website X5 Evolution позволяет Вам создавать мультиязычные сайты. Давайте рассмотрим краткую пошаговую процедуру создания сайта на трёх языках (Русский, Украинский, Английский). Допустим, что изначально сайт ориентирован на русскоязычную аудиторию.

  1. Доведите исходную (русскоязычную) версию сайта до финального состояния, после которого Вы готовы переводить его на другие языки.
  2. Создайте копию русскоязычного проекта сайта на этапе выбора проекта. Детальнее об этом можно прочесть в статье «Обзор Incomedia WebSite X5 Free 10 (часть 1). Создание сайта бесплатно». И назовите её, например, «Украинская версия сайта» (на самом деле, имя не принципиально).
  3. Начните редактировать «Украинская версия сайта» и на первом шаге создания сайта на вкладке Основной в спадающем списке Язык контента «UA – Ukrainian». Подробнее об этом можно прочесть в статье «Обзор Incomedia Website X5 Evolution 10 (часть 1). Платный конструктор сайтов». Если нужного Вам языка нет в списке, то при помощи менеджера языка содержимого Вы можете его создать. Детальнее об этом  можно прочесть в статье «Обзор Incomedia WebSite X5 Free 10 (часть 2). Программа конструктор сайтов».
  4. На первом шаге создания сайта в поле URL сайта введите адрес сайта с указанием директории языка. Например, если адрес сайта «http://primer.com», а украинская версия сайта будет находиться в подпапке «ua», то в это поле необходимо ввести «http://primer.com/ua» (без кавычек).
  5. Если Ваш язык есть в списке Язык контента, перейдите к пункту 5. Если Вам пришлось создать язык контента, то при помощи менеджера языка содержимого переведите все слова с английского языка на украинский.
  6. Переведите всё содержимое сайта на всех страницах проекта «Украинская версия сайта» с русского на украинский. Это самый объёмный пласт работы.
  7. Повторите вышеописанные действия для английского языка.
  8. Вернитесь в основной (главный) проект на русском языке. На четвёртом шаге создания сайта в разделе Страница приветствия добавьте все нужные языки в список языков (особенности этого процесса будут рассмотрены ниже), выстройте их порядок, задайте русский язык как язык по умолчанию и включите опцию Показывать ссылки на другие языки. На втором шаге Создание карты сайта, в свойствах главной страницы проверьте, чтобы в поле Имя файла не было «index» (без кавычек). Задайте другое имя, например, «glavnay» (без кавычек).
  9. Экспортируйте русский вариант сайта на сервер.
  10. Перейдите в проект «Украинская версия сайта» на пятом этапе создания сайта выберите Экспорт сайта в интернет и в строке Папка назначения укажите папку, которую Вы определили для украинской версии сайта (как это сделать рассмотрено ниже). Например, «ua» (без кавычек). Укажите её в формате «/ua» (без кавычек). Экспортируйте сайт.
  11. Повторите пункт 9 для английской версии сайта, но в качестве папки назначения укажите «/en» (без кавычек). Это если для английского языка Вы указали адрес «en».
  12. Если Вы используете Incomedia WebSite X5 Professional 10, то на первом шаге создания сайта, для основной версии сайта (в нашем случае русской версии), на вкладке Эксперт рекомендую внести карту сайта украинской версии в область «robots.txt». Ниже показан пример файла «robots.txt» и жирным выделены строки, которые относятся к мультиязычности.

User-agent: *
Disallow: /*admin*
Disallow: /*captcha*
Disallow: /*menu*
Disallow: /*imemail*

User-agent: Yandex
Disallow: /*admin*
Disallow: /*captcha*
Disallow: /*menu*
Disallow: /*imemail*
Host: primer.com
Sitemap: http://primer.com/ua/sitemap.xml
Sitemap: http://primer.com/sitemap.xml

Также обратите внимание на то, что такие папки как «admin», «captcha» и так далее, должны быть закрыты от индексации, но для того, что бы не дублировать эти записи для каждой версии языка, можно добавить знак «*» до и после имени папки. Это значит, что папка «http://primer.com/admin» и папка «http://primer.com/ua/admin» будут закрыты от индексации всего одной строкой «Disallow: /*admin*». Стоит отследить, нет ли страниц сайта, в адресе которых встречается одна из закрытых от индексации папок. Например, если страница «http://primer.com/administrirovanie-serverov» должна быть проиндексирована поисковыми системами, то вышеуказанный файл «robots.txt» не даст этому произойти. Тогда можно поступить так:

User-agent: *
Disallow: /admin/
Disallow: /captcha/
Disallow: /menu/
Disallow: /imemail
Disallow: /ua/admin/
Disallow: /ua/captcha/
Disallow: /ua/menu/
Disallow: /ua/imemail

User-agent: Yandex
Disallow: /admin/
Disallow: /captcha/
Disallow: /menu/
Disallow: /imemail
Disallow: /ua/admin/
Disallow: /ua/captcha/
Disallow: /ua/menu/
Disallow: /ua/imemail
Host: primer.com
Sitemap: http://primer.com/ua/sitemap.xml
Sitemap: http://primer.com/sitemap.xml

Рассмотрим настройки для создания мультиязычного сайта в Incomedia WebSite X5 Evolution 10 (рисунок ниже).

Настройки для создания мультиязычного сайта

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

Website X5 Evolution

Website X5 Evolution позволяет ввести название языка самостоятельно или, если оно есть в списке языков контента, то выбрать из предложенных. Опция Изображение для этого языка (напр. флаг) позволяет задать изображение (в формате JPG, JPEG, GIF, PNG) для ссылки на ту или иную версию сайта. Опция Ссылка для данного языка (например, показать сайт на этом языке) (рисунок ниже)- это набор действий, рассмотренных в статьях «Обзор Incomedia WebSite X5 Free 10 (часть 3). Создаем сайт сами» и «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов». Нас интересует Файл или URL. Выберите опцию Файл в Интернет и укажите имя директории, в которой будет содержаться версия сайта на создаваемом Вами языке. Например, «/ua» (без кавычек) для украинского языка. «/ua» - это и есть Папка назначения, в которую необходимо экспортировать сайт в девятом пункте списка выше.

Incomedia

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

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

Рекламное сообщение

Раздел Рекламное сообщение (рисунок ниже) позволяет разместить «баннер» (сообщение) на страницах Вашего сайта. При нажатии на этот «баннер» (сообщение) будет происходить определённое Вами действие.

Incomedia Website

Incomedia Website позволяет выбрать один из трёх типов сообщений (опция Тип сообщения).

  1. Отображать рекламу в правом верхнем углу.
  2. Отображать рекламу в рамке.
  3. Отображать рекламу в горизонтальной полосе.

Рассмотрим настройки для типа сообщения Отображать рекламу в правом верхнем углу (рисунок выше).

  • Изображение. Можно задать статическое растровое изображение формата JPG, JPEG, GIF, PNG или SWF анимацию.
  • Стиль. Доступно семнадцать стилей анимации рекламы. Их схематические примеры приведены на рисунке ниже.
  • Ширина/высота. Размер рекламного сообщения в пикселях от 80 до 1280.

Среди стилей анимации рекламы есть следующие.

  1. Star Blue.
  2. Star Red.
  3. Star Yellow.
  4. Massage Top.
  5. Massage Right.
  6. Page Peel.
  7. Heart Red.
  8. Heart Pink.
  9. Hearts.
  10. Arrow.
  11. Mail.
  12. Easter Eggs.
  13. Halloween.
  14. Present Green.
  15. Present Yellow.
  16. Snow Man.
  17. Santa.

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

Incomedia Website X5

В Incomedia Website X5 вторым типом сообщения является Отображать рекламу в рамке (рисунок ниже). Это своего рада «Popup сообщение». Лично моё отношение к подобному, как пользователя, крайне негативное. Рассмотрим доступные опции.

  • Изображение. Можно задать статическое изображение формата JPG, JPEG, GIF, PNG.
  • Положение. Можно задать положение окна на странице: По центру, Сверху – Слева, Сверху – Справа, Снизу – Слева, Снизу – Справа.
  • Эффект. Вы можете задать эффект появления сообщения. Доступно шесть вариантов:  Нет, Исчезновение, Стереть снизу, Стереть сверху, Стереть справа, Стереть слева.
  • Показывать это сообщение только один раз. Указывает на то, что сообщение необходимо показать одному пользователю только один раз.

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

Опции этого типа похожи на предыдущие. Единственное отличие – Цвет фона. Данная опция позволяет задать цвет фона панели (включая прозрачность).

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

Звук в качестве приветствия. Данная опция позволяет Вам задать звуковой файл в формате MP3 при появлении рекламного сообщения. Рекламное сообщение может отображаться на всех страницах сайта или только на главной. Для этого служат опции Отображать только на главной странице и Отображать на всех страницах.

Пример работы рекламного сообщения Вы можете посмотреть на тестовом сайте.

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

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

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

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

 

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