PHPShop Editor

Материал из PHPShop CMS

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

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


Содержание

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

Windows 2000,XP,Vista, Windows 7 Internet Explorer 5.0 и выше

Загрузка

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

Возможности

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

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

Editor visual.png

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


Управление

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


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

Editor panel visual.png

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

  • Открыть другой шаблон – содержит выпадающий список с доступными для редактирования шаблонами.
  • Disk.png – сохраняет текущие изменения
  • Синхронизировать – вызывает мастер синхронизации PHPShop с сервером
  • Файлы шаблонов – вызывает окно проводника с папками, содержащими файлы шаблонов
  • Мой сайт – открывает сайт в окне браузера
  • Режим браузера –представляет текущий шаблон в основном окне редактора в режиме предварительного просмотра.
  • Главная страница\Остальные страницы – обеспечивает навигацию по страницам сайта.
  • Html.png – включает режим правки кода
  • Image edit.png – подсвечивает все заголовки текущей страницы, обеспечивает возможность их изменения
  • Отменить – стирает последнее изменение
  • Arrow redo.png – возвращает последнее отмененное изменение
  • Page code.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 – представляет текст в виде пронумерованного или промаркерованного списка.
  • Вырезать\Копировать\Вставить – кнопки управления буфером обмена.
  • Поиск – вызывает диалоговое окно поиска
  • Заменить – вызывает диалоговое окно поиска и замены кода
  • Перейти к строке – вызывает диалоговое окно для поиска по номеру строки и столбца
  • Сместить влево\ Сместить вправо\Выровнять код – позволяет управлять выравниванием строк.
  • Добавить закладку\Удалить закладку – управляет созданием и удалением закладок.
  • Предыдущая закладка\Следующая закладка – позволяет перемещаться между закладками.

Панели

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

Editor inserted blocks.png

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

Editor blocks for insert.png

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

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

Editor panel variables.png

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

Editor files templates.png

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

Видео-урок

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