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

Редактор дизайна можно вызвать клавишей F4 или соответствующей кнопкой в панели управления

Откроется окно редактора, привязанное к левому краю программы

 

 

В верхней части редактор расположены 3 вкладки:

Проект – все настройки на данной вкладке будут применены к общему стилю страниц вашего проекта

Страница – настройки будут активны исключительно на данной странице

Modules – на данной вкладке вы можете выбрать любой модуль из тех что у вас установлены и провести его настройки

 

 

Ниже расположен блок поиска, при помощи которого можно легко найти необходимый вам слой.

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

 

 

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

Как только вы выбрали нужный вам блок в редакторе дизайна, снизу появится новая панель редактирования, в которой вы можете вносить нужные вам настройки верстки

 

Возле каждой ячейки настроек есть специальная сноска в виде знака вопроса  нажав на которую вы можете посмотреть основную информацию по данному параметру

 

 

После внесения каких-либо изменений, они сразу отобразятся на проекте, но что бы они сохранились необходимо нажать кнопку «Применить»

 

 

 

Редактор CSS – это окно редактирования верстки сайта при помощи специального языка программирования. Вызывается клавишей F3 или через панель управления, кнопкой

 

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

 

 

При выборе любого элемента в дереве дизайна, которому уже присвоен какой-либо параметр, оно автоматически откроется в окне редактора CSS.

 

 

Довольно удобно работать с редактором CSS и панелью управления браузера, например, Google Chrome. На любом сайте откройте панель редактирования (клавиша F12 в браузере) и проинспектируйте нужный вам блок. Откроется HTML код блока и его CSS настройки, который прямо в браузере можно и изменить. В последствие ваши правки вы можете скопировать в редактор CSS, в тот стиль, который вы правили.

Основная информация по работе с браузером:

1. Включение инспектора для выделение нужного объекта
2. Выбранный объект
3. HTML код данного объекта
4. CSS настройки, которые можно редактировать или добавлять новые
5. Страницы стилей, в которых прописаны эти настройки. Наведя на них, вы можете увидеть их местоположение в проекте. Справа от имени находится номер строки, на которой расположенная данная настройка. По этому номеру вы можете искать параметры в редакторе CSS

 

 

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

 

 

В верхней части редактора CSS расположена панель поиска, отмены последнего действия и сохранения данных

 

 

 

В обновлении программы версии 5.4 была добавлена новая вклада в редактор дизайна "Другие"

 

 

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

 

 

 

При открытом реакторе CSS и выборе любого стиля из списка, вас автоматически перенесет на ту строку файла, где находится данный стиль