Работа в website x5. уроки (часть 3)

Настройка Database Viewer


WebSite X5 Professional 13

Этап 1 (не обязательный). Сперва создайте отдельную группу пользователей и пользователя в Настройки – Расширенные настройки – Управление доступом (рисунок ниже).


Уроки WebSite X5

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

Этап 3. На созданной или уже существующей странице разместите объект Database Viewer и перейдите в его настройки (рисунок ниже).


Видео-уроки WebSite X5

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

В поле Table Name (имя таблицы) укажите название таблицы базы данных, которую хотите отображать. Учтите, что оно может отличаться от того имени, которое Вы задали в настройках, например, той же корзины (рисунок ниже).


Имя таблицы

В моём примере имя таблицы в настройках корзины — «tovary», но в базе данных она называется «tovaryproducts» (рисунок ниже).


phpMyAdmin

Так вот в настройках объекта Database Viewer нужно указывать именно то имя, которое будет в базе данных. В моём примере это «tovaryproducts».

Все остальные опции объекта Database Viewer, по большому счёту, не обязательны. Можно указать заголовок таблицы в поле Header Title (заголовок шапки), настроить цвета разных элементов таблицы и включить чередование подсветки строк таблицы (опция Alternate rows color (разный цвет строк)).

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

При желании можно активировать показ инструментов редактирования, которые помогут внести правки в таблицу базы данных или даже удалить строки (опция Show Edit Controls (показать инструменты редактирования)). Рекомендую не включать данную опцию.

Очень-очень полезной, по моему мнению, опцией является List of hidden columns (список скрываемых столбцов). В моём примере скрыты такие столбцы (их нужно указывать через запятую без кавычек): «product_id, option, suboption, vat, price_plus_vat, physical, digital, download_hash, download_link, download_end_ts». По умолчанию, если не скрывать столбцы, то будут отображаться все 14, присутствующие в базе данных (рисунок ниже).

Таблица базы данных

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


Отображение таблицы базы данных на сайте

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

Этап 4. Для получения информации о дате заказа нужно сдублировать объект Database Viewer и заменить значение таких полей (без кавычек):

  • Table Name – «tovaryorders». У Вас имя таблицы может отличаться.
  • List of hidden columns – «ip, vat, price_plus_vat, currency, shipping_name, shipping_icon, shipping_price, shipping_vat, shipping_price_plus_vat, payment_name, payment_icon, payment_price, payment_vat, payment_price_plus_vat, coupon, vat_type, availability_reduction_type, contains_digital_products».

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


Отображение таблицы базы данных на сайте (2)

Она нам нужна, чтобы видеть дату совершения заказа.

Этап 5. Далее экспортируем в CSV первую таблицу. На рисунке ниже показаны параметры импорта таблицы в LibreOffice Calc (разделитель — запятая). Ничего не делая с данными, нужно найти ID первого заказа, совершённый в прошлом месяце. Это сделать достаточно просто. Следует найти его при помощи поиска во второй таблице на сайте. Для этого вводим нужный Вам год и месяц.  Например, «2017-07» (без кавычек) – формат «год-месяц» (2017 июль).


Открытие CSV-файла

После этого перейдите в LibreOffice Calc, найдите нужный ID и удалите все заказы, ниже строки с нужным Вам ID. Так Вы удалите заказы, совершённые до июля 2017. По большому счёту, в LibreOffice Calc Вы сможете проводить любые нужные действия с данными.

Дизайны и работа с шаблонами

1 шагом в работе с системой является выбор и редактирование шаблона. Вам доступны 3 варианта: взять готовый вариант, загрузить шаблон из личной библиотеки либо же создать с нуля собственный дизайн.

Стандартные шаблоны разбиты на 13 тематических категорий. Выбирать есть из чего. Представлено около 160 разнообразных макетов крепкого среднего уровня качества. Выглядят они современно, сдобрены эффектами, местами могут похвастать оригинальной структурой. Тем не менее, большинство из них содержат до 5 страниц длиной максимум в пару экранов – рассчитаны на маленькие сайты. Желая расширить структуру, придётся дорабатывать её и дизайн вручную. Так вы сможете убить сразу несколько зайцев – получить более-менее уникальный дизайн, развить навыки работы с редактором шаблонов (поверьте, они вам пригодятся не раз, лучше начать учиться сразу) и украсить сайт на свой вкус.

После выбора шаблона вам будет предложено отредактировать его при помощи целой кучи инструментов:

  • Задайте структуры для основного и адаптивного шаблонов. Выберите тип (горизонтальное/вертикальное) и место размещения меню (шапка/сайдбар). Можно настроить фон страницы раздельно для каждого из блоков (хедер, футер, контент, меню) и отступы до контентной области от краёв блоков. Эти опции можно заполнять раздельно для десктопной и мобильной версии шаблона;
  • Настройка стилей текста. Для каждого типа текстового элемента на сайте (заголовки, текст контента, ссылки, меню, кнопка и т. д.) можно настроить видимость цвет текста/фона, шрифт, выравнивание, размер/цвет рамки;
  • Настройка главного меню. Укажите ширину, задайте поля, расстояние между кнопками, шрифт и выравнивание текста для меню. Также можно изменить цвет фона или фоновое изображение для отдельных кнопок в пассивном/активном состоянии. Есть и 3D-стили, при помощи который сможете изменить форму кнопок, наложить эффекты на них, а также настроить рамку, которая придаст эффект трёхмерности кнопкам вашего меню;
  • Настройка стиля раскрывающегося меню позволяет выбрать тип меню (один или несколько столбцов), его ширину, шрифт, выравнивание и эффект появления/исчезновения подпунктов. Аналогично обычным меню здесь можно настроить параметры для отдельных пунктов и 3D-стили;
  • Для меню отдельной страницы можно изменить его расположение, ширину, толщину/цвет/тень рамки и указать расстояние между кнопками;
  • Всплывающие подсказки при наведении курсора мыши на элемент. Настройте расположение таких окошек, эффекты, цвет фона, стиль текста, его выравнивание и параметры рамки;
  • Showbox – настройка стилей всплывающих окон для показа изображений и документов. Можно назначить эффекты, внешний/внутренний цвет, степень прозрачности, стили текста и рамки;
  • Настройка стиля макета E-mail – задайте внешний вид для окна отправки сообщений, их содержания, логотипа компании и футера письма. Выберите цвет фона, рамки, шрифты и прочее.

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

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

В целом, WebSite X5 предлагает очень богатый набор опций для создания/редактирования шаблонов. Среднее качество встроенных решений с лихвой перекрывается богатыми возможностями по кастомизации. По данному пункту программа не имеет никаких заметных недостатков.

HTML coding and web content analysis

Information shown in this section is used by optimizers to control a home page verbiage, the amount of links, frames, widgets, text, keyword density. The report contains an analysis of using Flash elements, and allows to control web layout (microformat and Doctype).

IFrame – floating frames located inside the ordinary document. They allow to download any other independent document in the range of set rates.

Flash is a multimedia platform for building web-based applications or multimedia presentations. It is widely used for developing of advertising banners, animation, games, and playing audio and video files on web pages.

Microformat is a method of word sense tagging of information on different subjects (events, companies, people, goods, etc.) with the use of ordinary HTML or XHTML elements.

Особенности создания сайта в WebSite X5

Веб-сайт, созданный в программе WebSite X5, имеет адаптивный дизайн для мобильных устройств, HTML5, CSS3, поддержку Open Graph, оптимизацию для поисковых систем, чистый и валидный код. Шаблоны сайтов, созданных в  WebSite X5, успешно проходят проверку кода на ошибки (валидацию) на сервисе validator.w3.org, то есть код сайта соответствует всем современным требованиям.

Для пользователей, не имеющих знаний программирования, которые не знают, что такое HTML, PHP, CSS, вариант создания сайта в программе WebSite X5 будет удобным решением. Профессионалы могут создавать сайты для своих заказчиков.

WebSite X5 — платная программа, имеющая три тарифа: WebSite X5 Start 13, WebSite X5 Evolution 13, WebSite X5 Professional 13. Версии программы отличаются функциональными возможностями. Для сайта-визитки или лендинга подойдет тариф WebSite X5 Start 13, для более серьезного сайта имеет смысл использовать тарифы WebSite X5 Evolution 13 или WebSite X5 Professional 13.

Подробное описание отличия версий программы, смотрите на официальном сайте. При использовании тарифов WebSite X5 Evolution 13 или WebSite X5 Professional 13, на один год бесплатно предоставляется доменное имя, адреса электронной почты и дисковое пространство на хостинге. После покупки можно использовать программу WebSite X5 для создания неограниченного количества сайтов.

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

WebSite X5 скачать

Программа WebSite X5 работает на русском языке, программа полностью локализирована, в том числе и справка. На официальном сайте работает Help Center, есть видео уроки на русском языке на YouTube.

Создание сайта в WebSite X5 происходит в режиме последовательного выполнения 5 шагов:

  1. Настройки.
  2. Шаблон.
  3. Карта.
  4. Страницы.
  5. Анализ и экспорт.

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

Сейчас рассмотрим создание сайта на примере использования WebSite X5 Professional 13.

Create a beautiful and professional website for you business in a few steps

WebSite X5 Professional 12 lets you create web pages in just a few steps. Without the need of any previous programming or web design skills, you can create a website in minutes.

Create your business page online

WebSite X5 Professional 12 is the perfect program if you want to create a website with an attractive, professional look but lack the expertise.

Through its clean interface, WebSite X5 Professional 12 allows you to create a website through its guided process. You start by choosing a template, which will be the key to creating the structure of your website.

WebSite X5 Professional 12 has more than 1,000 graphic templates and, if you dare, you can even customize these or create one from scratch.

WebSite X5 Professional 12 can be used to create any type of website, though in truth the professional edition is best suited for businesses. If you want to create a more personal site or blog, we recommend the WebSite X5 Evolution 12 edition.

WebSite X5 Professional 12 is the perfect app to create e-commerce sites to show off your catalog and sell your products.

WebSite X5 Professional 12 also allows you to manage dynamic content. This allows your employees to update the page directly online, without access to the program.

Another useful option of WebSite X5 Professional 12 is its access management, ideal to have control over the database of your customers.

WebSite X5 Evolution 11 was only focused on desktop web pages, but with version 12 it has included page layouts suitable for mobile devices. Thus, the app has the option to create responsive designs, i.e. web designs to suit the device from which the page is viewed. This means that, no matter where your users view your web page, the browsing experience will be optimal.

Resources for all

Another of the great strengths of WebSite X5 Evolution 12 is how well all of its responsive design options are integrated. It is easy to manage, and see how it adapts to the different versions of your site.

You don’t have a clue SEO? That is no problem, because WebSite X5 Professional 12 has tools that improve your rankings in the main search engines.

WebSite X5 Evolution does not neglect safety. The latest version has added a new selection of options to manage the privacy and security aspects of your website. This includes a policy control for your website, the ability to add a recpatcha, and a filter to avoid spam on your page’s comments.

Easy to use and with surprising results

If we had to summarize WebSite X5 in two adjectives they would be: easy and professional. It is surprising the ease with which anyone — even those with little or no knowledge — can design a site with a profession, high-quality look.

It is also worth noting that WebSite X5 is available in two varieties, Evolution and Professional. This review is talking about the more business focused Professional offering.

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

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

Объект Список продуктов (рисунок выше) разделён на две вкладки.

  1. Список.
  2. Опции.

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

Вкладка Опции (рисунок ниже) позволяет задать и настроить отображение областей товаров на странице.

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

  1. Только текст.
  2. Картинка и текст.
  3. Текст и картинка.
  4. Только картинка.
  5. Чередовать картинки и текст.

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

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

Все в одном

Экономьте свое время и силы, ведь WebSite X5 включает все, что может понадобиться для создания привлекательных и интуитивно-понятных сайтов. Для каждого задания есть отдельный инструмент: от редактора изображений, фотографий и автоматического создания кнопок и меню, до публикации сайта при помощи встроенного FTP-движка. Вам не понадобится ни одна другая программа — в WebSite X5 есть все!

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

Вы можете воспользоваться услугами любого хостинг-провайдера, но стоит помнить, что в поставку WebSite X5 входит регистрация вашего доменного имени и 5 Гб свободного места на сервере без каких-либо дополнительных взносов

Создание сайта в WebSite X5 Professional 13

Процесс создания сайта проходит в окне программы в визуальном режиме. В окне «Выбор проекта» необходимо выбрать проект: создать новый или редактировать существующий. Дайте название для нового проекта.

На первом этапе «Настройки», нужно настроить параметры сайта. Используйте общие и расширенные настройки.

В общих настройках введите необходимые параметры сайта: имя сайта, автор сайта, URL адрес сайта, описание, язык сайта, добавьте значок (фавикон) и изображение.

В расширенных настройках выберите нужные параметры, настройте отдельные элементы сайта: «Блог», Лента RSS», «Мобильное приложение», «Корзина», «Статистика, SEO и код», «Конфиденциальность и безопасность», «Страница приветствия», «Рекламное сообщение», «Управление данными», «Управление доступом», «Панель Управления и WebSite X5 Manager».

Выберите отдельную функцию сайта, настройте ее по своему усмотрению, или согласитесь с настройками программы по умолчанию.

На втором этапе «Шаблон», выберите шаблон для сайта. Во вкладке «Выбор» доступны следующие варианты создания шаблона сайта:

  • «Шаблон по умолчанию» — выбор любого из доступных шаблонов.
  • «Пользовательская библиотека» — выбор шаблона из своей библиотеки.
  • «Новый Шаблон» — самостоятельное создание собственного шаблона.

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

На третьем этапе «Карта», создается «Карта сайта». Создайте структуру страниц. В свойства страниц добавьте описание, ключевые слова, фон, пользовательский код и т. д. Настройте порядок обновления карты сайта.

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

На завершающем пятом этапе «Анализ и экспорт», проанализируйте веб-сайт на наличие ошибок и готовность сайта для поисковой оптимизации (SEO). Далее можно выгрузить сайт в интернет через FTP-соединение, экспортировать сайт в папку на диск своего компьютера, или экспортировать проект в файл, который сохранится в папке на компьютере.

Для выгрузки сайта в интернет запросите у своего хостинг провайдера настройки для FTP-соединения. После экспорта файлов сайта на диск в папку, можно редактировать файлы сайта вручную. Экспорт проекта можно использовать для переноса проекта на другой компьютер.

Если сайт нуждается в доработке, откройте в программе WebSite X5 существующий проект, исправьте или переделайте требующие корректировки элементы сайта.

Права доступа на файлы и папки

Иногда бывают случаи, когда сайт не выгружается на хостинг, комментарии к блогу не добавляются или возникают ошибки типа «Доступ запрещён». Одним из вариантов решения подобных проблем является проверка прав доступа на файлы и папки. На мой взгляд, проще всего это сделать через панель управления хостинг-аккаунтом. Как в неё зайти и где взять учётные данные для входа, Вы можете узнать в службе технической поддержки хостинга или в его справочной системе.

Даже если Вам не надо менять права доступа на файлы и папки, то учётные данные для доступа к FTP нужны для экспорта сайта или его изменений на сервер. Об этом Вы сможете прочесть в статье «».

Рекомендую пробовать установить права доступа на папки «755» или «775», лучше «755». На файлы рекомендую «644». На файлы, которые находятся непосредственно в корневой папке сайта, можно установить разрешение «444».

Рассмотрим, как это сделать на примере панели управления хостингом ISPmanager.

  1. Перейдите на страницу авторизации в панели и введите свои учётные данные.
  2. Зайдите в директорию, содержащую папку, в которой располагается папка с Вашим сайтом. Как правило, это папка «www», а директория сайта носит имя URL имени сайта. Например, «test2.aleksius.com».
  3. Выделите папку с вашим сайтом. В моём примере это «test2.aleksius.com».
  4. В панели инструментов в правом верхнем углу нажмите кнопку Атрибуты.
  5. В появившемся окне Атрибуты файла (рисунок ниже) в спадающем списке Рекурсивно выберите значение сменить права только для директорий. Это указывает на то, что необходимо менять права только на папки, а не на файлы, но для этой и всех вложенных в неё папок (рекурсия).
  6. В поле Права доступа укажите «755» или «775», лучше «755».
  7. Нажмите кнопку Ok.

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

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

  • Установите и запустите FileZilla.
  • У левой верхней части окна в поля «Хост», «Имя пользователя» и «Пароль» введите Ваши учётные данные для доступа FTP-сайта. Их можно узнать у Вашего хостинг-провайдера (рисунок ниже).

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

В появившемся окне установите настройки, указанные на рисунке ниже. Можно просто ввести трёхзначное число в поле Числовое значение

Обратите внимание на то, что опция Перенаправить на вложенные каталоги и опция Применить только к каталогам указывает на то, что заданные в поле Числовое значение права, будут распространяться на эту папку и все вложенные в неё папки (не файлы)

Нажмите кнопку ОК и дождитесь окончания применения прав. Время зависит от количества объектов, скорости сети, загрузки сервера и так далее.
Для смены прав доступа к папкам выделите папку с вашим сайтом и нажмите на неё правой клавишей мыши. В появившемся окне установите настройки, указанные на рисунке ниже. Можно просто ввести трёхзначное число в поле Числовое значение

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

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

Рекомендую использовать смену прав доступа к файлам и папкам при помощи панели управления хостингом. Так как, например, ISPmanager применяет права доступа ко всем файлам и папкам буквально за 2-3 секунды.

Кликабельный телефон

Разместим в шапке сайта телефон компании. Причём, если посетитель зашёл на сайт с мобильного телефона и нажал на номер телефона в шапке сайта, начнётся набор этого номера телефона. Это срабатывает не на всех телефонах (зависит от модели, версии операционной системы и браузера). Если нажать на подобный номер на компьютере, где установлен Skype (и специальный плагин браузера), то начнётся набор номера телефона в Skype. Для создания подобного номера будем использовать URL-схему «tel».

В Website X5 16 специально для этого был добавлен .

Для этого на втором шаге создания сайта в Шаблон – Персонализация – разместите объект HTML-код и в него добавьте следующий код:

Где «+380951234567» – номер телефона в международном формате.

Обратите внимание, возможно понадобится изменить стиль ссылки в соответствии с дизайном Вашего сайта. Как вариант, можно изменить ссылку так:. Где «telefon» – стиль оформления ссылки

Где «telefon» – стиль оформления ссылки.

А во вкладке Эксперт (в настройках объекта HTML-код) добавить стиль для оформления ссылки (рисунок ниже). Например, (делает ссылку белой и без подчёркивания):


Incomedia Website X5 Evolution, Professional

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий