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

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

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

 

 

В предыдущих статьях «Обзор Incomedia Website Х5 Evolution 9 (часть 1, 2, 3, 4, 5)» были рассмотрены различные инструменты, объекты и их настройки для создания шаблона сайта, его структуры, меню, а также самих страниц сайта с их содержимым. Четвёртый шаг создания сайта в Incomedia Website Х5 Evolution 9 это Продвинутые настройки. На данной странице (рисунок ниже) собрано десять разделов настроек.

  1. Главное меню.
  2. Выпадающее меню.
  3. Меню страницы.
  4. Стиль и модели.
  5. Страница приветствия.
  6. Рекламное сообщение.
  7. Блог.
  8. Лента RSS.
  9. Управление доступом.
  10. Корзина.

Продвинутые настройки

В этой части статьи будут рассмотрены первые пять разделов продвинутых настроек Incomedia Website Evolution.

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

Главное меню

Раздел Главное меню (рисунок ниже) позволяет настроить стиль отображения главного меню сайта. В разделе есть три вкладки.

  1. Общие.
  2. Пункты меню.
  3. 3D Стиль.

Раздел Главное меню

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

  • Ширина. Расстояние в пикселях, которое могут занимать все пункты меню. Для того, чтобы разместить пункты меню в левой части полосы меню или по центру, можно варьировать данной величиной. Чем она больше, тем больше расстояние между надписями, тем шире каждый пункт меню. В результате этого меню займёт всю ширину области меню шаблона сайта.
  • Горизонтальное поле. Расстояние в пикселях, по горизонтали от текста пункта меню до рамки пункта меню.
  • Вертикальное поле. Расстояние в пикселях, по вертикали от текста пункта меню до рамки пункта меню.
  • Между кнопками. Расстояние в пикселях между пунктами меню.
  • Шрифт. Настройки шрифта для пунктов меню.
  • Выравнивание (Слева, По центру, Справа). Выравнивание текста пункта меню.
  • Использование антиалиазинга при отображении текста. Так как Incomedia Website Х5 Evolution 9 преобразовывает текст в пунктах меню в изображение, то может возникнуть эффект «ступенек» шрифта. Антиалиасинг может помочь в устранении данной проблемы. Не рекомендую его использовать в случае, если размер Вашего шрифта менее 11 пунктов.
  • Включить автро-прокрутку по. Если Ваше главное меню – вертикальное, то данная опция позволит всегда отображать его на виду, даже если пользователь будет прокручивать длинную страницу сайта вниз. Меню «поедет» вместе со страницей и всегда будет на видном месте.

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

Вкладка Пункты меню

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

  • Цвет фона. Возможна прозрачность.
  • Цвет текста.
  • Цвет рамки.
  • Фоновая картинка. Возможно задать фоновое изображение (JPG, GIF, PNG).
  • Стиль шрифта (Вкладка, Рельефный, Затемнить). Данные опции позволяют задать выбранный Вами эффект для шрифта пункта меню. Не рекомендую его использовать, в случае, если размер Вашего шрифта менее 11 пунктов.
  • Стиль шрифта (Вкладка, Рельефный, Затемнить). Данные опции позволяют задать выбранный Вами эффект для шрифта пункта меню, когда на него наведён курсор мыши или он является текущим. Не рекомендую его использовать в случае, если размер Вашего шрифта менее 11 пунктов.

Вкладка 3D стиль (рисунок ниже) позволит задать различные эффекты для всего меню.

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

  • Форма. Доступно 28 форм для кнопки пункта меню. По сути Вы задаёте форму самой кнопки.
  • Сглаживание. Данный параметр указывает степень скругления краёв кнопки.
  • Слияние формы кнопок. Объединение настроек Форма и 3D форма для получения новых стилей отображения кнопки.
  • Графика. Доступно 13 графических эффектов для отображения меню.
  • Направление света. Можно указать одно из 9 направлений света для того, чтобы добиться нужного визуального эффекта.
  • Градиент. Указывает на размер градиента на изображении (от 0 до 10).
  • Непрозрачность. Вы можете задать степень прозрачности 3D стиля пунктов меню.
  • 3D границы. Вы можете выбрать один из четырёх стилей границы.
  • Внешняя ширина. Размер внешней ширины границы (от 0 до 15).
  • Внутренняя ширина. Размер внутренней ширины границы (от 0 до 15).
  • Только внешняя граница. При выборе опции Слияние формы кнопок Вам будет доступна возможность задать ширину только внешней границы для всего меню.

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

Выпадающее меню

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

Раздел Всплывающее меню

Сам раздел содержит три вкладки.

  1. Общие.
  2. Пункты меню.
  3. 3D стиль.

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

  1. Объединить в одну колонку. Все пункты подменю будут отображены в один столбец.
  2. Объединить в несколько колонок. Пункты будут отображаться в несколько столбцов. Это зависит от значения параметра Максимальное количество в колонке или от наличия разделителей в выпадающем меню. Разделители можно создавать на втором шаге создания сайта. Детальнее об этом можно прочесть в статье «Обзор Incomedia Website Х5 Evolution 9 (часть 2). Программа для создания сайта».

На вкладке Пункты меню (рисунок ниже) Incomedia Website Х5 Evolution 9 позволяет задать цветовое оформление для выпадающего меню. Существует три типа пунктов выпадающего меню.

  1. Пункт меню. Настройки цветового оформления для пассивного состояния пункта выпадающего меню (когда на него не наведён курсор мыши). Помимо цветового оформления Вы также можете задать иконку для пунктов выпадающих меню.
  2. Иконка для MousOver. Настройки цветового оформления для активного состояния пункта выпадающего меню (когда на него наведён курсор мыши). Вы также можете задать иконку для пунктов выпадающих меню.
  3. Разделитель. Настройки цветового оформления для разделителя. Вы можете задать иконку для разделителя.

Вкладка Пункты меню

Вкладка 3D стиль (рисунок ниже) аналогична одноимённой вкладке раздела Главное меню.

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

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

Если страница находится не на верхнем уровне иерархии (в карте сайта), то для неё в Incomedia Website Evolution можно отобразить меню страницы. В этом меню будут показаны ссылки на все страницы, которые находятся на этом уровне. Например, есть уровень (пункт меню) О сайте, в нём есть страницы Добро пожаловать, Популярное на сайте, Подписка на новости, RSS лента, Глоссарий, Правила поведения на сайте, Контакты, Гостевая книга. При переходе на любую страницу, кроме RSS лента, так как это ссылка, на ней будет отображаться меню со ссылками на страницы Добро пожаловать, Популярное на сайте, Подписка на новости, RSS лента, Глоссарий, Правила поведения на сайте, Контакты, Гостевая книга. Как это выглядит, Вы можете просмотреть на тестовом сайте. Настраивая опции раздела Меню страницы (рисунок ниже) Вам будет доступно две вкладки.

  1. Общие.
  2. Иконки меню.

Раздел Меню страницы

Вкладка Общие (рисунок выше) содержит некоторые опции по настройке внешнего вида меню, которые были рассмотрены в статье «Обзор Incomedia Website Х5 Evolution 9 (часть 1). Программа для создания HTML сайтов» Главное меню и Выпадающее меню. Эти опции повторно рассматриваться не будут.

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

Вкладка Иконки меню

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

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

Для управления стилями различных элементов страниц сайта в Incomedia Website Х5 Evolution 9 предусмотрен раздел Стиль и модели (рисунок ниже).

Раздел Стиль и модели

Он разделён на четыре вкладки.

  1. Текст.
  2. ShowBox.
  3. ToolTip.
  4. E-mail.

Рассмотрим каждую из этих вкладок более детально.

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

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

Для элементов Текст страницы, Активная ссылка, Ссылка на Mousover, Посещённая ссылка Вы можете задать цвет текста, настроить шрифт. Для Текст страницы доступно выравнивание (Слева, По центру, Справа). Для Активная ссылка, Ссылка на Mousover, Посещённая ссылка доступна смена цвета фона (можно прозрачность) и стиль текста (Подчёркнутый, Нормальный). Объект Активная ссылка обладает дополнительной опцией Указатель. При помощи неё Вы можете задать особый указатель (ICO, CUR, ANI).

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

Вкладка ShowBox

Вы сможете настроить эффект отображения (Нет, Чёткость, Убрать сверху), заменить внешний цвет фона, внутренний цвет фона, задать прозрачность, задать тень (опция Показать цвет (CSS3)), задать толщину и цвет границы и настроить отображение шрифта (размер, цвет, выравнивание и так далее). Как и в других случаях при изменении настроек Вы сможете видеть результат в правой части окна программы Incomedia Website Х5 Evolution 9.

На вкладке ToolTip (рисунок ниже) собраны все те же настройки, что и для ShowBox, только они относятся к всплывающим подсказкам. Дополнительной настройкой данной вкладки является возможность отображения (или скрытия) окончания «облака» подсказки (опция Показать конец).

Вкладка ToolTip

В Incomedia Website Х5 Evolution 9 есть возможность настроить письма, которые будут приходит с Вашего сайта пользователям. Вкладка E-mail (рисунок ниже) служит как раз для этого.

Вкладка E-mail

 

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

  1. Макет E-mail. Доступны настройки цвета внешнего фона, внутреннего фона и рамки. Также Вы сможете задать толщину отступа от рамки до текста сообщения (от 1 до 25 пикселей).
  2. Картинка/Логотип компании. Позволяет задать изображение с логотипом Вашей компании, задать ему выравнивание и положение (внутри или вне рамки). Возможно задать его размер (до 700 пикселей по ширине).
  3. Содержание сообщения. Можно настроить цвет текста и шрифт.
  4. Нижняя заметка. Можно настроить цвет текста, шрифт, выравнивание всего блока и его положение (внутри или вне рамки).

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

В Incomedia Website Х5 Evolution 9 есть возможность отображать страницу приветствия при входе на сайт (если пользователь заходит на главную страницу, а не на второстепенные). Специально для этого предусмотрен раздел Страница приветствия (рисунок ниже).

Раздел Страница приветствия

Вы можете задать цвет фона страницы, установить фоновое изображение, задать его повторение (по аналогии с настройкой шаблона, которая была рассмотрена в статье «Обзор Incomedia Website Х5 Evolution 9 (часть 1). Программа для создания HTML сайтов») и задать выравнивание. В качестве страницы приветствия может быть как изображение так и Flash анимация, видео или произвольный HTML код. Во всех случаях, кроме HTML кода, Вы сможете указать путь к объекту, который Вы хотите отобразить в качестве приветствия и задать его ширину и высоту. В случае с HTML кодом Вы сможете ввести сам код в окно редактора и задать его ширину и высоту.

Также Incomedia Website Х5 Evolution 9 позволяет задавать звук (MP3), который будет проигрываться на странице приветствия. Переход на главную страницу может быть осуществлён после указанного Вами в настройках количества секунд или пользователь может просто нажать на саму страницу приветствия и перейти на главную страницу сайта.

В Incomedia Website Х5 Evolution 9 есть возможность создавать сайты на нескольких языках. В предыдущей статье «Обзор Incomedia Website Х5 Evolution 9 (часть 5). Создание веб-сайта» был рассмотрен виджет перевода сайта от Google. Это автоматический способ перевода сайтов. О достоинствах и недостатках «машинного» перевода Вы можете прочесть в статье «Обзор GTranslate. Перевод сайтов».

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

Поле Серверный путь вебсайта или URL для этого языка

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

Incomedia Website Х5 Evolution 9 - это достаточно мощный инструмент для создания статических сайтов. Несмотря на все свои достоинства, его возможности ограничены Вашими силами. Чем лучше Вы будете владеть различными языками программирования (HTML, PHP), тем функциональнее Вы сможете сделать свой сайт, выходя за рамки возможностей Incomedia Website Х5 Evolution 9. Чем совершеннее Вы владеете графическими редакторами, знанием CSS, чем лучше у Вас «дизайнерский вкус», тем красивее и оригинальнее Вы сможете сделать свой проект. Как уже отмечалось в предыдущих статьях, необходимо прикладывать массу усилий, тратить множество времени для роста посещаемости и интереса пользователей относительно Вашего сайта.

В статье «Обзор Incomedia Website Х5 Evolution 9 (часть 7). Программа для создания сайта» цикла статей о Incomedia Website Х5 Evolution 9 будут рассмотрены такие разделы настроек проекта сайта как Рекламное сообщение, Блог, Лента RSS, Управление доступом и Корзина.

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

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

 

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