PHPShop Editor

Материал из PHPShop

Перейти к: навигация, поиск

PHPShop Editor – это утилита, с помощью которой можно управлять структурой шаблона дизайна сайта или интернет-магазина. Утилита позволяет редактировать дизайн страницы в двух режимах - режиме визуального управления и режиме правки HTML-кода.


Содержание

Системные требования

Windows XP,Windows Vista,Windows 7,Windows 8


Загрузка

PHPShop Editor входит в комплект EasyControl

Возможности

  • Редактирование шаблонов дизайна
  • 2 режима работы: визуальный и HTML-режим.
  • Позволяет менять стили CSS шаблона
  • Включает в себя таблицу переменных

Начало работы

Локальная версия сайта

  1. Установка через EasyControl
  2. Использование проекта по-умолчанию на локальном компьютере (настройки не требуются)
  3. Редактирование локальной версии на компьютере
  4. Синхронизация локальной версии с рабочей в интернете через "Мастер синхронизации проектов"

Подключение к удаленному сайту через FTP

  1. Установка через EasyControl
  2. Создание нового проекта "На сервере через FTP"
  3. Редактирование серверной версии

Локальная версия сайта через Denwer

  1. Установка Editor.exe через EasyControl
  2. Установка виртуального сервера Denwer
  3. Использование нового проекта на локальном компьютере с выбором папки размещения файлов PHPShop (WWW) в папке Denwer (C:\WebServers\home\localhost\www)
  4. Редактирование локальной версии на компьютере
  5. Синхронизация локальной версии с рабочей в интернете через "Мастер синхронизации проектов"

Режим мастер оформления

Editor fon.png

Мастер оформления позволяет визуально менять стили оформления CSS. Переключится в режим можно через меню "Шаблон" - "Мастер оформления". Мастер оформления сразу открывает окно настройки при смене шаблона (опция открытия меняется в настройках). Мастер позволяет быстро менять основные цветовые настройки шаблона, такие как:

  • Фон сайта
  • Цвет и изображения шапки
  • Цвет и размер текста в описании
  • Цвет и размер цены товара
  • Цвет и размер ссылок
  • и еще более 50 параметров, отличающихся от типа шаблона

Режим визуального управления

Editor 1.png


Режим визуального управления и редактирования позволяет менять местами и управлять кодом внутренних блоков дизайна: опросами, баннерами, каталогами и т.д. Блоки можно перемещать в любое место, удалять из шаблона. Поддерживается режим HTML-редактора кода для выбранного блока.

Управление

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


Описание ссылок и иконок

Editor panel visual.png

В визуальном режиме PHPShop Editor содержит следующие иконки быстрого запуска:

  • Открыть другой шаблон – содержит выпадающий список с доступными для редактирования шаблонами.
  • Disk.png – сохраняет текущие изменения
  • Синхронизировать – вызывает мастер синхронизации PHPShop с сервером
  • Файлы шаблонов – вызывает окно проводника с папками, содержащими файлы шаблонов
  • Мой сайт – открывает сайт в окне браузера
  • Режим браузера –представляет текущий шаблон в основном окне редактора в режиме предварительного просмотра.
  • Главная страница\Остальные страницы – обеспечивает навигацию по страницам сайта.
  • Html.png – включает режим правки кода
  • Image edit.png – подсвечивает все заголовки текущей страницы, обеспечивает возможность их изменения
  • Отменить – стирает последнее изменение
  • Arrow redo.png – возвращает последнее отмененное изменение
  • Page code.png – показывает исходный код выбранного элемента шаблона дизайна, позволяет произвести изменения с отдельным блоком
  • Удалить блок – удаляет выделенный элемент шаблона дизайна.

Панели

Режим визуального редактора:

Editor inserted blocks.png

Вставленные блоки – отображает список всех блоков шаблона и их переменных на странице

Editor blocks for insert.png

Блоки для вставки – отображает список блоков и их переменных, ожидающих вставки

Режим правки HTML кода

Editor html.png

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

Управление

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

Editor panel html.png

В режиме правки HTML-кода доступны следующие иконки быстрого запуска:

  • Открыть другой шаблон – содержит выпадающий список с доступными для редактирования шаблонами.
  • Сохранить шаблон – сохраняет текущие изменения
  • Синхронизировать – вызывает мастер синхронизации PHPShop с сервером
  • Файлы шаблонов – вызывает окно проводника с папками, содержащими файлы шаблонов
  • Мой сайт – открывает сайт в окне браузера
  • Отменить – стирает последнее изменение
  • Вернуть – возвращает последнее отмененное изменение
  • Расширенный режим – открывает дополнительное меню со списком файлов шаблонов

Иконки редактирования кода:

  • Параграф – выравнивание текста с помощью тега p
  • Align left\Center\Align Right – выравнивание текста по левому краю, по центру, по правому краю.
  • Break – перенос строки.
  • Жирный – выделение текста жирным с помощью тегов .
  • Strike – зачеркивание текста с помощью тегов
  • Шрифт – вызывает диалоговое окно для вставки кода цвета и размера шрифта.
  • Subscript – преобразует выделенный текст в нижний индекс, т.е. текст, заключённый в тегах , будет выводиться немного ниже базовой линии.
  • Superscript - преобразует выделенный текст в верхний индекс, т.е. текст, заключённый в тегах , будет выводиться немного выше базовой линии.
  • Курсив – выделяет текст курсивом с помощью тегов
  • Подчеркнутый – выделяет текст подчеркиванием с помощью тегов <underline></underline>
  • H1 – позволяет создать заголовок первого уровня
  • H2 – позволяет создать заголовок второго уровня
  • H3 – позволяет создать заголовок третьего уровня
  • Image – вызывает диалоговое окно вставки изображения.
  • Anchor – вызывает диалоговое окно вставки гиперссылки.
  • Table – вызывает диалоговое окно вставки таблицы.
  • Textarea – позволяет создать элемент формы для области, в которую можно вводить несколько строк текста.
  • Input - позволяет вставить текстовых поля, различные кнопки, переключатели и флажки.
  • Form - устанавливает форму для обмена данными между пользователем и сервером.
  • Inframe – вызывает диалоговое окно для создания области внутри документа, в которую можно загрузить любые другие независимые документы.
  • Horisontal Rule - вставляет в текст горизонтальную разделительную линию.
  • Onsordered list\ Ordered list – представляет текст в виде пронумерованного или промаркерованного списка.
  • Вырезать\Копировать\Вставить – кнопки управления буфером обмена.
  • Поиск – вызывает диалоговое окно поиска
  • Заменить – вызывает диалоговое окно поиска и замены кода
  • Перейти к строке – вызывает диалоговое окно для поиска по номеру строки и столбца
  • Сместить влево\ Сместить вправо\Выровнять код – позволяет управлять выравниванием строк.
  • Добавить закладку\Удалить закладку – управляет созданием и удалением закладок.
  • Предыдущая закладка\Следующая закладка – позволяет перемещаться между закладками.

Панели

Режим HTML-редактора:

Editor panel variables.png

Переменные – отображает список внутренних переменных на данном участке шаблона.

Editor files templates.png

Расширенный режим (доступен при нажатии иконки Расширенный режим) – отображает список всех файлов шаблона.

Видео-урок

Создан обучающий видео-урок, описывающий возможности визуального редактора шаблона Editor: http://www.youtube.com/watch?v=nF9rKGYcAUE

Примеры работы

Редактирование фона сайта

Editor fon.png
Для редактирования общего фона сайта, который показывается как большая подложка следует вызвать режим "Мастер оформления":
  • Выбрать опцию "Фон сайта"
  • Нажать кнопку "Библиотека фоновых изображений" и выбрать нужное изображение. Если изображение начинается с big*, то это большой фоновый рисунок. Если с pic*, то небольшое плиточное изображение для создания повторяющихся фонов.
  • При выборе плиточного изображения следует так же выставить параметр "Повтор" - "Повторить". При такой настройке маленькое изображение размножится по всему экрану, создав очень красивый визуальный эффект.


Возможные проблемы

Белый экран вместо локального сайта

Если в окне браузера открывается белая страница с содержанием, что такая страница отсутствует, то это означает, что не удалось запустить локальную версию магазина по адресу http://localhost/ Решение этой проблемы описано в инструкции https://help.phpshop.ru/knowledgebase.php?article=146

Не работает визуальный режим

Если вместо адреса http://localhost/ указать адрес настоящего сайта, то режим управления отключается. нужно строго указывать адрес локального проекта. И только после локальной правки запускать его синхронизацию с рабочим.

Не работает синхронизация

Если после синхронизации проектом вы не видите изменения на рабочем сайте или происходит ошибка копирования файлов при самой синхронизации, то можно синхронизировать файлы в ручном режиме. Для этого нужно скопировать локальную папку C://PHPShop/www/phpshop/templates/имя_шаблона_для_правки на ваш FTP в папку путь_до_папки_скрипта/phpshop/templates/