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

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

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

 

 

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

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

Стили и модули

Инструмент Стили и модули (рисунок ниже) позволяет задать оформление различным элементам сайта. Таким как:

  • заголовок страницы.
  • Хлебные крошки.
  • Основной текст.
  • Активная ссылка.
  • Ссылка, на которую навели курсор мыши.
  • Посещённая ссылка.
  • Поле ввода данных.
  • Кнопка.
  • Нижнее меню.

WebSite X5 10

В WebSite X5 10 у большинства этих элементов есть схожие опции. Не будем их рассматривать несколько раз.

Page Title. Это заголовок страницы, который отображается на самой странице вверху (рисунок ниже), а не во вкладке окна браузера.

Бесплатный конструктор сайтов

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

  • Visible. Опция, которая позволяет включить\отключить отображение данного элемента на сайте.
  • Background Color. Цвет фона заголовка. Возможна прозрачность.
  • Text Color. Цвет шрифта заголовка.
  • Font Type. Вы можете задать гарнитуру, кегль и начертание заголовка страницы.
  • Alignment. Incomedia WebSite X5 Free 10 позволяет задать выравнивание заголовка страницы. Доступны опции Left, Center, Right (по левому краю, по центру, по правому краю).
  • Border Color. Цвет границы заголовка страницы. Можно задать разный цвет для разных частей границы обводки (отдельно для левой, правой, верхней и нижней части) (рисунок ниже). Пример работы данного инструмента Вы можете увидеть на тестовом сайте.
  • Horizontal Margin. Отступ от левого и правого края страницы до области заголовка страницы.

Цвет границы

Настройки стиля Page path (рисунок ниже), или «Хлебных крошек», аналогичны PageTitle. Обратите внимание на то, что в Incomedia WebSite X5 Free 10 данного элемента на страницах сайта нет. Так как WebSite X5 Free имеет ограничение на количество страниц и нет возможности создания уровней, данный элемент навигации, «хлебные крошки», бесполезен. Он призван упростить передвижение пользователя по сайту, подсказать ему, на какой странице и в каком разделе сейчас находится посетитель. Ещё одно преимущество «хлебных крошек» заключается в улучшении перелинковки страниц и «накачке» их ключевыми словами, что должно помочь Вам в SEO оптимизации сайта.

Хлебные крошки

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

Текст страницы

Active Link. Настройки стилей ссылки (рисунок ниже). При помощи спадающего списка Text Style Вы можете выбрать, будет ли ссылка подчёркнута (опция Underlined) или будет без подчёркивания (опция Regular). В опции Pointer Вы можете указать изображение (форматы ICO, CUR, ANI), которое примет курсор мыши при наведении на ссылку. Хочу отметить, с точки зрения удобства пользования сайтом, что эксперты в данной области, например  Якоб Нильсен, считают, что «стандартное» оформление (цвет, начертание) ссылок упрощает пользователям работу с сайтом. Если того не требует дизайн сайта (его визуальное оформление), то лучше оставить оформление ссылки как есть.

Активная ссылка

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

Наведённая ссылка

Visited Link. Настройка посещённой ссылки. Опции (рисунок ниже) аналогичны рассмотренным выше.

Посещённая ссылка

Field. Incomedia WebSite X5 Free 10 позволяет настроить вид поля ввода данных (или поиска) (рисунок ниже). Но в бесплатной версии данный элемент не отображается нигде на страницах сайта.

Поле

Drop shadow позволяет отобразить тень внутри поля ввода. Rounded Corners – радиус скругления углов поля ввода. Можно задать разный радиус для разных углов (рисунок ниже).

Скругление углов

Button. Настройка кнопок. Опции (рисунок ниже) аналогичны рассмотренным выше. Также как и в случае с Field объект Button не используется в Incomedia WebSite X5 Free 10.

Кнопка

Footer Menu. Настройки этого объекта (рисунок ниже) идентичны настройкам Page Title, но относятся к нижнему меню. Нижнее меню, в отличие от горизонтального и вертикального, текстовое.

Нижнее меню

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

Всплывающие подсказки

  • Tooltip Position. Позиция всплывающей подсказки по отношению к объекту, к которому она относится. Есть четыре варианта положения Top, Bottom, Left, Right (вверху, внизу, слева, справа).
  • Effect. Эффект появления всплывающей подсказки. Можно выбрать вариант без эффекта или один из двух доступных (Fade, Alternate).
  • Background Color. Цвет  фона всплывающей подсказки.
  • Opacity. Степень прозрачности фона. От 0 до 100.
  • Show Tail. Включает отображение «хвостика» всплывающей подсказки.
  • Color. Цвет текста во всплывающей подсказке.
  • Font Type. Можно задать гарнитуру, кегль и начертание шрифта.
  • Alignment. Выравнивание текста всплывающей подсказки. Доступно три опции. Left, Center, Right (по левому караю, по центру, по правому краю).
  • Thickness. Толщина линии обводки всплывающей подсказки. Можно задать разную толщину для левой, верхней, правой и нижней линии.
  • Color. Цвет линии обводки всплывающей подсказки. Можно задать разный цвет для левой, верхней, правой и нижней линии.
  • Rounded Corners. радиус скругления углов всплывающей подсказки. Можно задать разный радиус разным углам.
  • Drop Shadow. Настройки тени всплывающей подсказки (рисунок ниже). Color – цвет тени; Offset X, Offset Y – отступы тени от всплывающей подсказки по оси X и Y (от 0 до 25 пикселей); Diffusion – диффузия тени от 0 до 50 пикселей; Size – размер тени (чем-то похож на диффузию) от 0 до 50 пикселей.

Настройка тени

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

Экспорт

Бесплатный конструктор сайтов Incomedia WebSite X5 Free 10 предлагает три варианта экспорта проекта (рисунок ниже).

  1. Загрузка сайта в интернет.
  2. Экспорт сайта на диск.
  3. Экспорт проекта Incomedia WebSite X5 Free 10 для дальнейшей с ним работы.

Это пятый и последний шаг создания сайта в Incomedia.

Incomedia

Новая Pro версия программы обладает дополнительными опциями. Подробнее об этом Вы сможете прочесть в статье «Обзор WebSite X5 Professional программа для создания web сайтов (часть 3)».

Загрузка сайта в интернет

Для загрузки сайта в интернет при помощи Incomedia WebSite X5 Free 10 Вы уже должны были купить хостинг. После получения настроек доступа к FTP своего хостинг-аккаунта от своего провайдера Вам необходимо сделать некоторые настройки соединения (рисунок ниже) в WebSite X5 Free 10.

WebSite X5 Free

  • FTP Address. Адрес доступа к Вашему FTP. Можно узнать у хостинг-провайдера.
  • User name. Имя пользователя FTP. Можно узнать у хостинг-провайдера.
  • Password. Пароль доступа к FTP. Можно узнать у хостинг-провайдера, а затем его поменять на надёжный. О том, как создавать надёжные пароли, Вы можете прочесть в статье «Безопасный пароль».
  • Save password. Вы можете сохранить пароль от FTP в Incomedia WebSite X5 Free 10, чтобы ускорить процедуру экспорта сайта. Не рекомендую этого делать. Существуют вирусы, которые нацелены на похищение паролей от FTP, которые сохраняются в программах. Ещё некоторые советы по повышению защиты Вашего сайта от взлома Вы можете прочесть в цикле статей «Защита сайта часть 1, 2, 3, 4, 5, 7, 8». Этот цикл статей посвящён защите сайта на Joomla, но часть материала относится к любым веб-сайтам.
  • Destination folder. Директория, в которой должен располагаться сайт. Как правило, это или «/www» (без кавычек) или «/www/доменное имя сайта» (без кавычек). Где «доменное имя сайта» - это папка с именем, аналогичным домену Вашего сайта. Например, aleksius.com. Можно ничего не указывать в этом поле. После успешного подключения Incomedia WebSite X5 Free 10 отобразит структуру каталогов Вашего сервера и Вы сможете указать, куда именно нужно загрузить файлы сайта. Уточнить информацию по поводу папки, в которой должен размещаться сайт, можно в службе технической поддержки своего хостинг-провайдера. Или в соответствующем справочном разделе сайта хостинг-провайдера.
  • Port. Вы можете указать специальный порт для подключения к Вашему серверу. Как правило, менять данное значение не надо.  Уточнить информацию по поводу порта можно в службе технической поддержки своего хостинг-провайдера. Или в соответствующем справочном разделе сайта хостинг-провайдера.
  • Simultaneous connections. Вы можете задать количество одновременных подключений к серверу. Чем больше это число, тем больше одновременно будет передаваться файлов с Вашего компьютера на сервер. Тем быстрее пройдёт загрузка сайта в интернет. Учтите, что большое количество одновременных подключений может вызвать негативные последствия вплоть до невозможности передачи данных. Как правило, оптимальное количество подключений от 3 до 10. Не советую менять значение по умолчанию. При возникновении проблем можно попробовать уменьшить число подключений.
  • Use Passive FTP. Использование пассивного режима повышает шансы на стабильное соединение с сервером. Для справки: «FTP может работать в активном или пассивном режиме, от выбора которого зависит способ установки соединения. В активном режиме клиент создаёт управляющее TCP-соединение с сервером и отправляет серверу свой IP-адрес и произвольный номер клиентского порта, после чего ждёт, пока сервер не запустит TCP-соединение с этим адресом и номером порта. В случае, если клиент находится за брандмауэром и не может принять входящее TCP-соединение, может быть использован пассивный режим. В этом режиме клиент использует поток управления, чтобы послать серверу команду PASV, и затем получает от сервера его IP-адрес и номер порта, которые затем используются клиентом для открытия потока данных с произвольного клиентского порта к полученному адресу и порту» (источник).
  • Upload all Website files to the Internet. В данном «режиме» Вы отправляете на сервер абсолютно все файлы сайта. Это нужно делать в первый раз или после очень больших изменений (но не обязательно), или если что-то произошло с файлами на сервере и Вы хотите «починить их». Если  Вы работает с Incomedia WebSite X5 Free 10 с разных компьютеров, то данная опция тоже может пригодиться. После  можно пользоваться «режимом» Export only the files modified after last export on date.
  • Export only the files modified after last export on date. Выгружает на сайт только те файлы, которые были изменены после последнего обновления сайта. Очень экономит время и трафик.

После того, как Вы настроили Incomedia WebSite X5 Free 10 и успешно подключились к своему хостингу, Вы увидите встроенный в программу FTP клиент (рисунок ниже). Если это первое подключение, то основная область с файлами и директориями будет пустой. Если повторное, то Вы увидите там файлы и папки Вашего сайта.

Incomedia WebSite

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

  • Go back to the upper folder. Позволяет перейти на уровень выше. В другую директорию.
  • Refresh current folder content. обновляет данные по содержимому текущей папки. Например, если Вы создали новую папку или переименовали существующую, но не видите изменений, то можно попробовать нажать кнопку Refresh current folder content для обновления данных.
  • Create new folder. Создание новой директории. Есть несколько рекомендаций относительно имени папки: не надо использовать знаки препинания, другие символы (кроме тире «-» и нижнего подчёркивания «_»). В качестве замены пробела между словами лучше использовать тире «-», чем нижнее подчёркивание «_». Используйте только буквы английского алфавита в нижнем регистре и цифры. Лучше, чтобы имя было описательным, содержало ключевые слова и отражало основную суть содержимого. Например папки, содержащей картинки к статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» имя может быть таким «website-x5-besplatnyj-konstruktor-sajtov» (без кавычек). Лучше не делать имена типа «qwd3756». Исключение – статья действительно посвящена тому, что называется «qwd3756». Не следует делать слишком длинные имена.
  • Delete the selected file or folder. Удаление выделенного файла или директории. Можно выбрать несколько объектов.
  • Rename the file or folder. Переименование файла или папки. Рекомендации к новым именам файлов или папок описаны выше. Обратите внимание на то, что не стоит переименовывать те файлы и папки, имена которым дала сама программа Incomedia WebSite X5 Free 10. Так как от этого может пострадать работоспособность сайта.
  • Display List. Отображает файлы и папки на сервере в виде простого списка без дополнительной информации (рисунок ниже). Данная опция влияет только на визуальное представление информации в окне WebSite X5 10.
  • Display Details. Отображает файлы и папки на сервере в виде расширенного простого списка с дополнительной информации (рисунок ниже). Такой как размер объектов (колонка Size), дата последнего изменения объекта в формате «число.месяц.год час.минута.секунда» (колонка Date). Данная опция влияет только на визуальное представление информации в окне WebSite X5 10.

Отображение объектов

В поле Path отображается путь к текущему каталогу от корня вашего хостинг-аккаунта.

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

На рисунке ниже показан процесс экспорта сайта на сервер. Вы сможете наблюдать общий прогресс, очередь экспортируемых файлов, их имена (столбец Local file) и размер (столбец Size). В столбце Status будет отображаться статус передачи текущего файла из WebSite X5.

WebSite X5

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

Экспорт сайта на диск

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

Incomedia WebSite X5

После этого без Incomedia WebSite X5 Вы сможете просмотреть сайт в браузере или отправить все файлы (рисунок ниже) на сервер при помощи стороннего FTP клиента. Например, FileZilla.

Экспортированные файлы

Экспорт проекта Incomedia WebSite X5 Free 10

Бесплатный конструктор сайтов WebSite Free позволяет экспортировать файлы проекта сайта в один архив IWZIP (рисунок ниже). В этот архив будет добавлен файл проекта WebSite X5 10, все файлы, которые участвуют в создании сайта и, если включена опция Include a copy of the WebSite preview, в архив будут включены файлы предварительного просмотра (ускоряет процесс создания предварительного просмотра сайта в окне тестового браузера). Это хороший способ перенести работу над проектом с одного компьютера на другой.

Incomedia WebSite X5 Free 10

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

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

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

 

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